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";
}

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

5 个答案: