js处理一个div里面多个点击事件时出现的事件冲突重复的解决方法事件冒泡

最新推荐文章于 2024-08-17 11:12:57 发布

失独者

最新推荐文章于 2024-08-17 11:12:57 发布

阅读量1w

点赞数 1

分类专栏： Jquery 文章标签： javascript 事件冲突事件重复冒泡阻断

本文链接：https://blog.csdn.net/luwei_cool/article/details/51533197

版权

Jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<div class="form-group" id="dd4bbe73-8dcb-422c-b8a8-5cb271362192">
    <div class="context" id="0"><div class="col-sm-10">
    <p class="form-control-static"><a class="controlA" href="#">蔡文昌<span class="type-span" type="FLRVVLG" style="font-weight:bold;color:#999;">(沿河村落居民户)     </span>
    </a>
    </p>
    </div>
    </div></div> 
分别点击 “蔡文昌” 和整个div时可以使用冒泡阻断方法 以阻止事件的冲突重复

解决方法：

//动态添加事件
$(document).on('click', '.form-group .controlA', function (event) {
    event.stopPropagation();//停止事件冒泡
    console.log("详情事件..");
});
$(document).on('click', '.form-group', function (event) {
    event.stopPropagation();//停止事件冒泡
    console.log("地图交互事件...");
});