檢測mousedown事件持續多長時間，然後在一定時間內阻止mouseup動作

我希望有一個更優雅的解決方案來解決此問題。基本上，我有一個HTML/Javascript應用程序，將在觸摸屏上運行。我試圖阻止默認的點擊行爲，如果有人通過拖動手指滾動瀏覽按鈕列表。起初，我試圖在檢測到滑動事件時防止默認。但後來我想到，這不是一個真正的滑動事件，而是一個漫長的ousedown。所以我寫了下面的代碼：檢測mousedown事件持續多長時間，然後在一定時間內阻止mouseup動作

var downClick; 
var startTime; 

$(".TPGSW-wrapper").on('mousedown', function() { 

    downClick = new Date(); 
    startTime = downClick.getTime(); 

}); 

$(".TPGSW-wrapper").on('mouseup', function() { 

    var upClick = new Date(); 
    var endTime = upClick.getTime(); 

    if (endTime - startTime < 250) { 
     return false; 
    } else if (endTime - startTime >= 300) { 
     // This is the action that I can't seem to get to work. 
     // I would like it to stop the click event. I also tried mouseup 
     this.on('click', function() { preventDefault; }); 
    }    

});

這正確測量鼠標按下的時間，但後來我似乎無法從射擊停止click事件。任何想法或建議？我只使用jQuery和這個僅用於webkit瀏覽器。提前致謝！

來源

2013-03-25 wewantfun

如果更換'和'click' mouseup'然後見好就收'event.preventDefault（也許工作）' （事件是函數的第一個參數 – JCOC611 2013-03-25 17:35:20

這不是關於用戶是否將他們的手指移動超過某個閾值距離，而不是一段時間？ – 2013-03-25 17:48:09

@Jeff B，是的，這也許也有意義。我發現，因爲div與它滾動，相對於div的點沒有變化，但我猜如果我查看窗口內的座標，這可能是一個更好的解決方案。謝謝！ – wewantfun 2013-03-25 19:12:17

好了，經過一些測試中，我能得到它與下面的代碼工作：

var longpress = false; 

$(".TPGSW-wrapper").on('click', function (e) { 
    (longpress) ? e.preventDefault() : alert("clicked"); 
}); 

var startTime, endTime; 
$(".TPGSW-wrapper").on('mousedown', function() { 
    startTime = new Date().getTime(); 
}); 

$(".TPGSW-wrapper").on('mouseup', function() { 
    endTime = new Date().getTime(); 

    if (endTime - startTime < 250) { 
     longpress = false; 
     console.log('< 250'); 
    } else if (endTime - startTime >= 300) { 
     longpress = true; 
     console.log('>= 300'); 
    } 

});

DEMO

如果鼠標被按下不到250毫秒的單擊事件將觸發，如果超過300毫秒，它會調用e.preventDefault並停止點擊事件。

來源

2013-03-25 17:36:01 razzak

WOW。幹得好，先生。非常感謝你。 – wewantfun 2013-03-25 20:05:02

非常歡迎:) – razzak 2013-03-25 20:07:13

else if (endTime - startTime >= 300) { 
    $(this).one('click', function (e) { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
    }); 
}

請注意如何使用「one」而不是「on」。這就是它只會觸發一次，而不是每次都觸發。

或每JCOC611的評論，你可以刪除你的鼠標鬆開事件，並使用此就地：

$(".TPGSW-wrapper").on('click', function (e) { 
    var upClick = new Date(); 
    var endTime = upClick.getTime(); 

    if (endTime - startTime >= 300) { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
    }    
});

來源

2013-03-25 17:36:42

謝謝。這實際上也不起作用，儘管它清理了我所擁有的東西。我認爲，因爲該動作綁定到點擊事件，但我需要測量mouseup的時間。所以最後，我可以測量mouseup，或者防止點擊事件，但是我不能同時做這兩件事。 – wewantfun 2013-03-25 20:03:30

檢測mousedown事件持續多長時間，然後在一定時間內阻止mouseup動作

回答

相關問題