javascript - Prevent link event after mousdown down delay

Question

I'm working on a function so that when an user clicks and holds onto a link, the link does not send the user to the appropriate link. However, the function that I used is not working. What I want is for the user to click on a link and if they hold it down for longer than one second, the link no longer works and no event is fired. After looking through it sometime, I can't find what's wrong with the code. So my question is, what did I do wrong? http://jsfiddle.net/rQP6g/2/

<a href="www.google.com" >link</a>

<script>
var timeoutId = 0;
    $('a').mouseup(function() {
    timeoutId = setTimeout(function(e) {  
    e.preventDefault();
e.stopPropagation();
}, 1000);
}).bind('mouseup', function() {
clearTimeout(timeoutId);
});
</script>

score 6 · Accepted Answer

これはうまくいくはずです：http://jsfiddle.net/rQP6g/18/

JS は次のようになります。

var mousedownTime;

$('a').mousedown(function(e) {
    mousedownTime = new Date();
}).click(function(e) {
    // If the mouse has been hold down for more than 1000 milliseconds ( 1 sec. ), cancel the click
    if(Math.abs(new Date() - mousedownTime) > 1000)
        e.preventDefault();
});

基本的な考え方は、マウスボタンが押された時間をキャプチャすることです。次に、離されたときにクリックイベントが発生し、1 秒を超える場合は計算されます。リンクが押されてから経過しました。この場合、クリックイベントはキャンセルされ、リンクは読み込まれません:)

score 1 · Accepted Answer

これがあなたの答えです：http://jsfiddle.net/rQP6g/19/テスト済みで動作中

また、あなたのjQueryコード：

var startingTime, timeOut = 1000;
(function($) {
    $('a').bind('click', function(e) {
        e.preventDefault();
    }).bind('mousedown', function(e) {
        window.startingTime = +new Date();
    }).bind('mouseup', function (e) {
        console.log('Starting time: '+ window.startingTime);
        var currentTime = +new Date();
        console.log('Current time: '+ (+new Date()));
        var difference = currentTime - window.startingTime;
        console.log (difference);
        if (difference > timeOut) {
            console.log('You are too slow, nothing happens');
        } else {
            console.log($(this).attr('href'));
            window.location.href = $(this).attr('href');
        }
    });
})(jQuery);

score 1 · Accepted Answer

私は逆のアプローチをとります - すべてを防ぎ、しきい値の前にリリースされたクリックを許可します:

// set threshold in millisecs:
var threshold = 1000;

$('a').on('click',function(event){

    event.preventDefault();

    // inject current time in link element:
    $(this).attr('data-timestamp', new Date.getTime());

}, function(event){

    // check mousedown timestamp against mouseup timestamp:
    if( (new Date.getTime() - $(this).attr('data-timestamp') < threshold){

        window.location.href = $(this).attr('href');    

    }

});

javascript - Prevent link event after mousdown down delay

3 に答える 3

Related

Reference