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を使用します。