我已经尝试了很多,但没有找到最佳解决方案。我有一张图片 (html),如果您按下/单击图片 5 秒长,他希望他打开一个链接。
到目前为止,我有这个代码:
if (...) { window.location.href = 'http://www.google.com'; }
我已经尝试了很多,但没有找到最佳解决方案。我有一张图片 (html),如果您按下/单击图片 5 秒长,他希望他打开一个链接。
到目前为止,我有这个代码:
if (...) { window.location.href = 'http://www.google.com'; }
只需单击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/
在单击事件处理程序中使用setTimeout 。
setTimeout 应该可以解决问题
使用 jQuery:
$('#linkImg').click(function(){
setTimeout(function(){
window.location.href="http://google.com";
},5000);
});
由于这是一个 javascript 答案,您可以这样做:
document.getElementById('random-image').addEventListener('click', function() {
setTimeout(function(){
window.location.href = 'http://www.google.com';
}, 1000);
}, false);
我已经为你创建了一个 JSFiddle (CLICK HERE)来说明行为。
如果您想单击并按住图像,这就是解决方案
var timeout = 0;
$('img').mousedown(function() {
timeout = setTimeout(myFunction, 5000);
}).bind('mouseup mouseleave', function() {
clearTimeout(timeout);
});
function myFunction() {
window.location.href="http://google.com";
}