我必须处理两个事件,即“ 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)
});
答案 0 :(得分:0)
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);
}
});
答案 1 :(得分:0)
使用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);
});
答案 2 :(得分:0)
来自https://api.jquery.com/dblclick/
建议将处理程序绑定到同一元素的click和dblclick事件。触发事件的顺序因浏览器而异,其中某些事件在dblclick之前收到两个click事件,而其他事件仅收到一个。双击灵敏度(被检测为两次单击的最长间隔时间)会因操作系统和浏览器而异,并且通常可由用户配置。
如何自己处理它,下面是一个用于多次点击检测的示例:
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>