如何创建事件，当用户点击元素时触发(2个子元素除外)

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

你有你的点击事件绑定到所有的东西，你需要检查目标来处理情况。

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

})；