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

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在内心的任何地方时,如何确保不会触发现场直播div？

编辑:

这是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 Pointer Events规则：

CSS：

#childElement {
    pointer-events: none;
}

JavaScript：

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