博客
关于我
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/

你可能感兴趣的文章
OpenCV与AI深度学习 | 实践教程|旋转目标检测模型-TensorRT 部署(C++)
查看>>
OpenCV与AI深度学习 | 工业缺陷检测中数据标注需要注意的几个事项
查看>>
OpenCV与AI深度学习 | 干货 | 深度学习模型训练和部署的基本步骤
查看>>
OpenCV与AI深度学习 | 手把手教你用Python和OpenCV搭建一个半自动标注工具(详细步骤 + 源码)
查看>>
OpenCV与AI深度学习 | 水下检测+扩散模型:或成明年CVPR最大惊喜!
查看>>
OpenCV与AI深度学习 | 深度学习检测小目标常用方法
查看>>
OpenCV与AI深度学习 | 超越YOLOv10/11、RT-DETRv2/3!中科大D-FINE重新定义边界框回归任务
查看>>
OpenCV与AI深度学习 | 高效开源的OCR工具:Surya-OCR介绍与使用
查看>>
OpenCV与AI深度学习|16个含源码和数据集的计算机视觉实战项目(建议收藏!)
查看>>
Opencv中KNN背景分割器
查看>>
OpenCV中基于已知相机方向的透视变形
查看>>
OpenCV中的监督学习
查看>>
opencv中读写视频
查看>>
OpenCV中遇到Microsoft C++ 异常 cv::Exception
查看>>
opencv之cv2.findContours和drawContours(python)
查看>>
opencv之namedWindow,imshow出现两个窗口
查看>>
opencv之模糊处理
查看>>
Opencv介绍及opencv3.0在 vs2010上的配置
查看>>
OpenCV使用霍夫变换检测图像中的形状
查看>>
opencv保存图片路径包含中文乱码解决方案
查看>>