当单击事件具有子元素时不起作用

Question

抱歉，如果标题有点混乱，我会尝试通过代码进行解释。基本上我创建了一个按钮来显示或隐藏电子商务网站的购物车（我正在使用 woocommerce）。这是我正在使用的代码示例。

HTML 标记

<div  class="crate-status toggle-cart">
    <img src="http://localhost/crate/wp-content/uploads/2016/05/mini-cart-icon.png" /><span class="crate-name">Crate:</span>
    <span class="cart-contents"><?php echo sprintf (_n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></span>

    <?php woocommerce_header_add_to_cart_fragment( $fragments ) ?>
</div>

Javascript

$(document).ready(function() {
    $('.toggle-cart' ).on('click', function(event) {
        $('.crate-box').toggleClass('toggle');
        $('.overlay-site').toggleClass('show-overlay');
    })

    $('body').on('click', function(event) {
      if (!$(event.target).is('.toggle-cart')) {
        $('.crate-box').removeClass('toggle');
        $('.overlay-site').removeClass('show-overlay');
      }
    })

})

该按钮工作正常，但是当我单击 img 或 span 等子元素时，即使它位于父元素（.toggle-cart）内，它似乎也不会触发 onclick 功能

这是网站的链接http://crate.ph/home/

Answer 1

您的两个事件处理程序都通过单击触发，因此您要切换两次。如果在每个处理程序中放置一个断点，您将能够看到问题。

尝试将 event.stopPropagation() 添加到 toggle-cart 处理程序而不是其他处理程序中的 if 语句。像这样：

$(document).ready(function() {
    $('.toggle-cart' ).on('click', function(event) {
        event.stopPropagation();
        $('.crate-box').toggleClass('toggle');
        $('.overlay-site').toggleClass('show-overlay');
    })

    $('body').on('click', function(event) {
        $('.crate-box').removeClass('toggle');
        $('.overlay-site').removeClass('show-overlay');
    })
})