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

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);

我已经为你创建了一个 JSFiddle (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";
}