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

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

Answer 2

这很容易。 它实际上正在发挥作用。如果你在

中加入了一个断点

$（＆＃39; .toggle-cart＆＃39;）。on（＆＃39;点击＆＃39;，功能（事件）{...}

你会看到它实际触发了那里。 但是这件事也被触发了：

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

因此，在您点击NOT .toggle-cart - ＆gt;的情况下你身上的eventListener隐藏你的表格

更好的方法是不要在整个主体上添加和使用EventListener，而是将其添加到叠加层上。在许多情况下，在身体上添加听众并不是一件好事

Answer 3

这不是java脚本问题。这是CSS问题。你需要将class =“crate-name”浮动。