Question

如何创建事件，该事件在用户单击元素时触发（例外是2个子元素）。 HTML：

<div class="cc-window cc-banner cc-type-info cc-theme-block" style="">
    <span id="cookieconsent:desc" class="cc-message">This website uses cookies to improve your experience. To learn more, read our Privacy Policy. <a class="cc-link">Learn more</a></span>
    <div class="cc-compliance">
        <a class="cc-btn cc-dismiss">I ACCEPT</a>
    </div>
</div>

我尝试了

jQuery('.cc-window.cc-banner').not(jQuery(".cc-link").not(jQuery(".cc-btn.cc-dismiss"))).on("click", function () {
        alert("HI!");
    });

但是如果我点击cc-btn

，就会触发警报

Answer 1

问题是您已将事件侦听器附加到cc-banner div，因此即使单击子元素，它也将始终注册该点击。

尝试检查点击处理程序中的事件目标。如果目标类与您不想单击的元素匹配，则返回：

$('.cc-banner').on("click", function (e) {
  var $target = $(e.target);
  if($target.hasClass('cc-link') || $target.hasClass('cc-dismiss')) return;
  alert("HI!");
});

Answer 2

您将click事件绑定到所有内容，需要检查目标以处理案件。

jsfiddle-https://jsfiddle.net/xpvt214o/668326/

$('.cc-window.cc-banner').on("click", function (e) {
    var t = $(e.target);
    if(!t.hasClass("cc-btn")){
        alert("I did not click on '.cc-btn'")
    } else {
        return;
    }

}）;

如何创建事件，该事件在用户单击元素时触发（例外是2个子元素）

2 个答案: