几秒钟后，单击图像，打开链接

Question

我已经尝试了很多，但没有找到最佳解决方案。我有一个图像（html），并希望如果你按下/点击图像5秒钟，他打开一个链接。

到目前为止，我有这段代码：

if (...) { window.location.href = 'http://www.google.com'; }

http://jsfiddle.net/xBz5k/

Answer 1

所有其他答案在简单点击后5秒打开链接。如果点击持续5秒，则会打开链接：

// the gif
var imgAnimation = '/images/animation.gif';
// the original image
var imgInitial = '/images/still.jpg';
// preload the gif
(new Image()).src = imgAnimation;
var imageMouseDown;
// mouse button gets pressed
$('#image').mousedown(function() {
    $(this).prop('src', imgAnimation);
    // start the timeout
    imageMouseDown = setTimeout(function() {
        window.location.href = 'http://www.google.com';
    }, 5000);
});

// when the mouse button gets released
$('#image').mouseup(function() {
    // the timeout isn't fired yet -> clear it
    if (imageMouseDown) {
            // set the old image again
            $(this).prop('src', imgStill);
        clearTimeout(imageMouseDown);
    }
});

这是一个包含更改图像的演示：http://jsfiddle.net/7Qugn/

Answer 2

在点击事件处理程序中使用setTimeout。

Answer 3

setTimeout应该做的伎俩

使用jQuery：

$('#linkImg').click(function(){
    setTimeout(function(){
        window.location.href="http://google.com";
    },5000);
});

Answer 4

由于这是一个javascript答案，你可以这样做：

document.getElementById('random-image').addEventListener('click', function() {
  setTimeout(function(){
    window.location.href = 'http://www.google.com';
  }, 1000);
}, false);

我created a JSFiddle for you (CLICK HERE)来说明行为。

Answer 5

如果您想点击并按住图片

，这就是解决方法

var timeout = 0;

$('img').mousedown(function() {
  timeout = setTimeout(myFunction, 5000);
}).bind('mouseup mouseleave', function() {
  clearTimeout(timeout);
});

function myFunction() {
  window.location.href="http://google.com";
}