博客
关于我
js点击事件禁止冒泡
阅读量:573 次
发布时间:2019-03-10

本文共 605 字,大约阅读时间需要 2 分钟。

对于$.car-style绑定的点击事件,在callback函数内部调用event.stopPropagation();即可有效阻止事件冒泡。这种方法在jQuery事件处理中是一个常见的操作。以下是具体实现代码:

$(".car-style").click(function() {    $(".operate-mask-outer").show();});

当页面上存在多个拦车点或需要同时处理的事件时,使用stopPropagation可以避免事件传递到子元素。例如,点击黄色禁停站时,避免事件传递到$(".operate-mask-outer")

$("#operateMask").click(function() {    $(".operate-mask-outer").hide();});

在处理某些特定元素的点击时,为了防止事件继续trigger到父元素,可以通过stopPropagation方法阻止。至于stopover-station类绑定的点击事件,可以通过以下方式实现阻止冒泡:

$(".stopover-station").click(function(event) {    event.stopPropagation();    // 克服弹出框外部点击触发的事件    // 并继续执行当前绑定的逻辑});

这种方式不仅可以处理窗口顶层,但也适用于内部嵌套的Dom元素。

转载地址:http://xbbvz.baihongyu.com/

你可能感兴趣的文章
Openlayers中点击地图获取坐标并输出
查看>>
Openlayers中设置定时绘制和清理直线图层
查看>>
Openlayers图文版实战,vue项目从0到1做基础配置
查看>>
Openlayers实战:modifystart、modifyend互动示例
查看>>
Openlayers实战:判断共享单车是否在电子围栏内
查看>>
Openlayers实战:加载Bing地图
查看>>
Openlayers实战:绘制图形,导出geojson文件
查看>>
Openlayers实战:绘制图形,导出KML文件
查看>>
Openlayers实战:绘制多边形,导出CSV文件
查看>>
Openlayers实战:绘制带箭头的线
查看>>
Openlayers实战:输入WKT数据,输出GML、Polyline、GeoJSON格式数据
查看>>
Openlayers高级交互(10/20):绘制矩形,截取对应部分的地图并保存
查看>>
Openlayers高级交互(11/20):显示带箭头的线段轨迹,箭头居中
查看>>
Openlayers高级交互(14/20):汽车移动轨迹动画(开始、暂停、结束)
查看>>
Openlayers高级交互(15/20):显示海量多边形,10ms加载完成
查看>>
Openlayers高级交互(16/20):两个多边形的交集、差集、并集处理
查看>>
Openlayers高级交互(17/20):通过坐标显示多边形,计算出最大幅宽
查看>>
Openlayers高级交互(19/20): 地图上点击某处,列表中显示对应位置
查看>>
Openlayers高级交互(2/20):清除所有图层的有效方法
查看>>
Openlayers高级交互(20/20):超级数据聚合,页面不再混乱
查看>>