防止儿童解雇父母的点击事件

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。如何click在内部click内的任何位置{@ 1}}时未确定实时div？

编辑：

这是所要求的JS

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

点击“.inner-div”

时，不应该触发

Answer 1

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

在简单的JS中像

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

就足够了。请注意jQuery provides the same facility：

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

或

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

Answer 2

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

来执行此操作

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

  return false;
})

或

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

  event.stopPropagation();
})

<子> <子> <子>

Answer 3

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

像

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

Answer 4

在js文件中使用stopPropagation

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

Answer 5

另一种解决方案是向子元素添加 CSS Pointer Events 规则：

CSS：

#childElement {
    pointer-events: none;
}

JavaScript：

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