javascript - 当我单击包含按钮的 l.divicon 自定义 html 时如何阻止弹出窗口打开
问题描述
我正在使用 esrileaflet 库在地图上呈现标记,该地图具有l.divicon
在自定义 HTML 中具有按钮的图标。
我已将一个事件绑定到调用的按钮单击,但也打开了我不想要的标记弹出窗口。
由于l.divicon
在其自定义 HTML 中包含一个按钮及其标记的一部分,因此每次我单击该按钮时,它都会显示一个警报并打开标记弹出窗口。如何停止标记弹出窗口?
let markerIcon = L.divIcon({
iconSize: L.point(32, 32),
iconAnchor: [5, 5],
html: '<div><img src= "url here"><button id="MyBtn"></button></div>'
});
marker.setIcon(markerIcon);
$("#MyBtn").on('click', function(e) {
alert("Hi there");
});
解决方案
似乎当点击事件到达标记时会出现弹出窗口。在这种情况下,在处理程序e.stopPropagation()
内部添加click
以阻止事件从#MyBtn
标记冒泡。
$("#MyBtn").on('click', function(e) {
e.stopPropagation();
alert("Hi there");
});
推荐阅读
- python - 如何使用 SOMPY 库标记 SOM 中的数据?
- c# - 按需中断方法执行
- ruby-on-rails - enum.rb:139 中的 ArgumentError:`assert_valid_value'
- android - Android TabLayout 阻止激活与选定选项相邻的选项卡
- laravel - 在另一个方法中调用一个方法并在控制器中传递一个参数
- java - 不支持因 sonar.binaries 和 sonar.libraries 而失败的声纳扫描仪
- python - 是否可以验证发布的链接的 SSL 或 TLS 证书?
- php - php 我想在提交时处理两个函数
- android - Android,颤动错误:任务':app:mergeDebugResources'的执行失败
- jmeter - Jmeter如何读取csv文件中的文件路径