Как предотвратить событие «click» для запуска до события «dblclick» - PullRequest
Новая
       14

Как предотвратить событие «click» для запуска до события «dblclick»

1 голос
/ 28 мая 2019

Мне нужно обработать два события: click и dblclick, но событие click всегда срабатывает перед событием dblclick и не позволяет событию dblclick выполняться. Как сделать так, чтобы событие правильно выполнялось: «click» и «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)
 });

Ответы [ 3 ]

0 голосов
/ 28 мая 2019

Используйте 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);
 });
0 голосов
/ 28 мая 2019

от 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>
0 голосов
/ 28 мая 2019 
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);
   }
 });
...