儿童事件的事件停止传播问题

Question

我对 jquery 停止传播有疑问。要在我单击除购物车模式之外的页面时关闭购物车模式，我必须这样做：

        $('html').click(function() {
            $('.cart-block').css('display','none');
        });

        $('.mycart, .cart-block').click(function(event){
            event.stopPropagation();

        });

但是我有一个问题，我有一个 AJAX 调用来删除我购物车中的一个项目 div（购物车块）但是停止传播正在停止事件。

$(document).on('click', '.deleteItem', function() {
    //ajax call
});

有没有人可以帮助我？多谢（对不起我的英语）

编辑：HTML 结构 //按钮购物车

  <div class="center cart mycart" >
           //icon and cart item counter
            </div>

        <div id="cartcaption" class="cart-block">
    //modal : content of the cart
<div class="productsPanier">
 <span id="{{$cart->rowId}}" class="deleteItem">delete</span>
    </div>
</div>

Answer 1

而不是你正在做的事情（绑定 2 个处理程序和一个停止传播），只需绑定一个处理程序并检查事件的目标是否有 class .cart-block

所以像这样：

$('html').click(function(event) {
   if (!$(event.target).hasClass('cart-block'))
      $('.cart-block').css('display','none');
});

并删除以下部分

 $('.mycart, .cart-block').click(function(event){
    event.stopPropagation();
 });

您的活动现在可以正确传播，如果您在购物车块元素内单击，'display: none;' 将不会添加到购物车块

编辑：如果最外面的 class 被命名为 'mycart'，您也可以这样尝试：

$('html').click(function(event) {
   if (!($(event.target).closest('.mycart').length))
      $('.cart-block').css('display','none');
});

这样做的目的是检查您点击的目标元素是否有 class 'mycart' 的父元素。此解决方案假定您在购物车内单击的任何内容都有一个包含 class 'mycart' 的容器。显然，在没有看到您的 DOM 的情况下，我不能确定这会解决您的具体情况。如果它与我假设的不同，它至少应该为您指明正确的方向。

儿童事件的事件停止传播问题

event stop propagation issue with children event

jquery

stoppropagation