防止子触发父的点击事件

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();
});






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

要么

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