如何防止“双击”事件之前触发“单击”事件的问题？

Question

我需要处理两个事件，分别是'click'和'dblclick'，但是'click'事件总是在'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)
 });

- Bre

---

设置一个变量，单击时变为true，但双击时变为false？或者类似这样的东西。 - evolutionxbox

你如何处理点击事件？ - ESD

可能是Jquery分别绑定双击和单击的重复问题。 - skyline3000

Answer 1

来自https://api.jquery.com/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>

- Thomas

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

- Dorian Mazur

---

但是这样我不能在第一次单击时放置点击事件。我应该双击一次以使 clicked 变量为 true。 - Bre

然后使用 setTimeout 函数。 - Dorian Mazur

请帮我。 - Bre

Answer 3

使用 setTimeout 并保留 timeout 对象，以便您可以在双击时清除它。

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

- ControlAltDel

---

我尝试过，但每次双击后它都会执行点击事件。我希望只能触发其中一个。在双击或单击上。 - Bre