如何将侦听器设置为传单自定义控件



作为传单的新手,我很难弄清楚如何向地图添加一个自定义控件,该控件可以侦听clickdblclick事件,以便在dblclick触发时click不会。 以前,我已经通过使用click侦听器内部的setTimeout()在谷歌地图上实现了这一目标, 但这似乎不起作用,因为setTimeout()似乎被忽略了。到目前为止,我的代码是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""> </script>
</head>
<body onload="makeMap()">
<script type="text/javascript">
function makeMap() {
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var timeOutAc = [];
var myMenu = L.Control.extend({
options: {position: 'topright'},
onAdd: function (map) {
this._div = L.DomUtil.create('div');
this._div.innerHTML = "<h2>text</h2>" ;
L.DomEvent.on(this._div, "click", this._click)
L.DomEvent.on(this._div, "dblclick", this._dblclick )
return this._div;          
},
_click: function(e){
timeOutAc.push(
setTimeout(function(e) {
L.DomEvent.stop(e);
alert("caught click")
}(e),1e4) // timeout set to 10s here...
)
},
_dblclick: function(e){
for(var i=timeOutAc.length-2; i<timeOutAc.length; i++) clearTimeout(timeOutAc[i]); 
L.DomEvent.stop(e);
alert("caught dblclick")
},
});
map.addControl(new myMenu());
}
</script>
<table border=1 style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;">
<tr style="height: 100%;">
<td>
<div id="map" style="width: 100%; height: 100%;"></div>
</td>
</tr>
</table>
</body>
</html>

请注意,如果L.DomEvent.on(this._div, "click", this._click)被注释掉dblclick则会正确捕获。

问题在于如何调用setTimeoutsetTimeout的第一个参数应该是一个函数,如果需要,其参数可以作为setTimeout的第三个(第四、第五等(参数。从而将函数_click更改为

_click: function(e){
timeOutAc.push(
setTimeout(function(e) {
L.DomEvent.stop(e);
alert("caught click")
},250,(e))
)
},

解决问题

最新更新