防止孩子触发父元素的点击事件

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事件。我该如何确保当我在内部的div任意位置点击时，不会触发外部的实时click事件？

编辑：

这是所请求的JS代码:

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

当点击“.inner-div”时，这不应该被触发。

- Mr Boss

---

请您发布您的JS/jQuery代码。 - Ravi Y

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

- Zeta

Answer 2

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

CSS：

#childElement {
    pointer-events: none;
}

JavaScript:

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

- Chunky Chunk

---

考虑到现在对此的支持，这很可能是首选解决方案。https://caniuse.com/#feat=pointer-events - user3342816

Answer 3

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

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

  return false;
})

或者

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

  event.stopPropagation();
})

- NullPoiиteя

Answer 4

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

就像这样：

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

- Talha Ahmed Khan

---

我特别喜欢这个解决方案的原因是它帮助我配置了反向事件：当我想让子事件触发，但不想让父事件触发时。 - Mike Zavarello

Answer 5

在你的JS文件中使用stopPropagation。

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

- Bal mukund kumar