javascript - 防止孩子触发父母的点击事件

Question

考虑以下代码段：

<div class="div-outer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <div class="div-inner" style="background:red">
        Curabitur hendrerit vehicula erat, ut gravida orci luctus vitae.
    </div>
</div>

现在假设外部 div 有一个click与之关联的 live。当我在内部的任何地方时，如何确保click不会触发直播？clickdiv

编辑：

这是所要求的JS

$(".div-outer").live("click",function(){alert("hi")}); 

单击“.inner-div”时不应触发此操作

Answer 1

您必须向内部子级添加事件侦听器并取消事件的传播。

在普通的 JS 中类似于

document.getElementById('inner').addEventListener('click',function (event){
   event.stopPropagation();
});

足够了。请注意，jQuery 提供了相同的功能：

$(".inner-div").click(function(event){
    event.stopPropagation();
});  

或者

$(".inner-inner").on('click',function(event){
    event.stopPropagation();
});  

Answer 2

另一种解决方案是向子元素添加CSS 指针事件规则：

CSS：

#childElement {
    pointer-events: none;
}

JavaScript：

document.getElementById("childElement").style.pointerEvents = "none";

Answer 3

您可以通过在内部 div 上添加点击事件并使用return false;或event.stopPropagation();

$(".div-inner").click(function(){

  return false;
})

或者

$(".div-inner").click(function(event){

  event.stopPropagation();
})

Answer 4

click为内部 div创建新的侦听器并event.stopPropagation()在该新事件中调用。

像

$('div-outer').on('click','div-inner',function(e){
    e.stopPropagation();
});

Answer 5

在你的 js 文件中使用 stopPropagation

 $(".eventclick").click(function(e) {
    e.stopPropagation();
});