javascript - 如何防止在“dblclick”事件之前触发“click”事件

Question

我必须处理两个事件，即“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)
 });

Answer 1

使用 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);
 });

Answer 2

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);
   }
 });

Answer 3

来自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>