javascript - 如何防止点击传播

Question

我有以下 div 和点击监听器：

  $('.right-col .modal-container').live('click',function(e) {
       $(this).remove();
       $('.right-col .modal-backdrop').remove();
  });


<div class="modal-container">
    ....some other buttons and html elements inside
</div>

问题是，当我单击此模态容器元素内的按钮时，它还会触发 .modal-container 处的单击功能。如何避免这种级联？

Answer 1

在谷歌写你的问题标题后，这里的第一个链接：http ://api.jquery.com/event.stopPropagation/

在这里如何使用它：

$('.right-col .modal-container').on('click',function(e) {
    $(this).remove();
    $('.right-col .modal-backdrop').remove();
}).find('button').click(function(e){ //guessing you have a <button> in the div
     e.stopPropagation();
});

Answer 2

如何确保此点击事件不是来自传播的点击，而是直接点击此 div

采用if (this == e.target){

$('.right-col .modal-container').on('click',function(e) {
    if (this == e.target){
       $(this).remove();
       $('.right-col .modal-backdrop').remove();
    }
});

e.target是您直接单击的元素，而不是e.currentTarget传播中的当前元素。这也适用于事件捕获，因为使用事件捕获：在到达单击的元素之前首先在容器上触发事件。

为了提高性能，您还应该按照@Karl-André Gagnon 的建议尝试在事件冒泡stopPropagation的情况下停止事件传播

事件捕获和事件冒泡的区别

Answer 3

如果您不希望div.modal-container成为目标，则可以在其上注册点击事件<button>。假设你有一个按钮的类名.modal-container，你可以试试这个：

$("button.modal-container").live('click', function(e){
    // your button specific actions here
    // ...

    $(e.target).parents(".modal-container").first().remove();
});