![](/img/trans.png)
[英]JavaScript: How prevent dblclick (Double Click) to also fire a single click event
[英]How to prevent 'click' event to fire before 'dblclick' event
我必須處理 'click' 和 'dblclick' 兩個事件,但 click 事件總是在 dblclick 事件之前觸發,並且不要讓 dblclick 事件執行。 如何使事件正確執行“點擊”和“dblclick”
google.maps.event.addListener(map, 'dblclick', function(event) {
polygon(map, event.latLng)
});
google.maps.event.addListener(map, 'click', function(event) {
click_events(map, event.latLng)
});
var clicked = false;
google.maps.event.addListener(map, 'dblclick', function(event) {
polygon(map, event.latLng);
clicked = true;
});
google.maps.event.addListener(map, 'click', function(event) {
if(clicked){
click_events(map, event.latLng);
}
});
使用 setTimeout 並維護超時對象,以便您可以在雙擊時清除它
var timeoutObj;
var timeoutThreshhold = ...; //number of milliseconds to wait for double click
google.maps.event.addListener(map, 'dblclick', function(event) {
if (timeoutObj) {
clear timeoutObj;
}
polygon(map, event.latLng);
});
google.maps.event.addListener(map, 'click', function(event) {
timeoutObj = setTimeout(function() {
timeoutObj = null;
click_events(map, event.latLng);
}, timeoutThreadhold);
});
來自https://api.jquery.com/dblclick/
不建議將處理程序綁定到同一元素的 click 和 dblclick 事件。 觸發事件的順序因瀏覽器而異,有些在 dblclick 之前收到兩個點擊事件,而其他只收到一個。 雙擊靈敏度(被檢測為雙擊的最大單擊間隔時間)可能因操作系統和瀏覽器而異,並且通常是用戶可配置的。
自己處理如何,這里是一個多點擊檢測的例子:
let timeout, n = 0, delay = 250; document.querySelector(".clicker").addEventListener("click", function(event) { ++n; clearTimeout(timeout); timeout = setTimeout(() => { clickHandler.call(this, n, event); n = 0; }, delay); // a visual aid for how many times you've already clicked in this sequence event.target.textContent = n; }); // just something visual const cssNamedColors = ["Maroon","Red","Orange","Yellow","Olive","Green","Purple","Fuchsia","Lime","Teal","Aqua","Blue","Navy","Black","Gray","Silver","White"]; // decide what to do for *n* clicks: function clickHandler(n, event) { event.target.style.background = cssNamedColors[n-1]; event.target.textContent = n + " - " + cssNamedColors[n-1]; }
.clicker { display: block; background: #888; padding: 100px 0; text-align: center; font-size: 36px; color: white; cursor: pointer; text-shadow: -1px -1px 3px #000, 1px -1px 3px #000, -1px 1px 3px #000, 1px 1px 3px #000; }
<div class="clicker">(Multi-)Click me</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.