将事件处理程序附加到子项、父项和文档

Question

这就是我想要的。页面上有几个框。每个框都有包含一些可点击 div 和文本的子项。当用户点击可点击的 div 时，应该会显示一个警报，说明该 div 已被点击。如果他们单击文本，则不会发生任何事情。这对我来说很棘手。

当他们单击框时，框应该有一个名为 open 的类，当他们单击不是框或框的子项的东西时，应该删除 open 类。如果他们点击了应该对框的类没有影响的可点击 div。

因此，如果用户单击另一个框，则第一个框仍应具有 open 类，新框也应具有 open 类，但如果他们单击标题或正文或框以外的任何其他内容，应删除 open 类。请记住，如果点击了可点击的 div，应该会触发相应的警报。

看起来这里有很多事件定位，我想知道你是否有一个好的解决方案。

仅出于演示目的，如果盒子有open 类，请将盒子的背景更改为绿色。如果他们单击标题或正文或其他 div 之类的其他内容，则该框应具有钢蓝色（原始颜色）。如果他们单击可点击的子 div，框的背景应该是绿色的，并且应该触发警报。

这里有一些代码：

$(document).on("click", function(e) {
  //is there somthing like:
  // if `this` is not the box or children of box remove the
  // class `open` from box. this way if they click on header or body I could remove 
  //the `open` class from box
  if (e.target == this) {
    $(".box").removeClass("open")
  } else if ($(e.target).hasClass("box")) {
    $(e.target).addClass("open")
  }
  if ($(e.target).hasClass("test1")) {
    alert("test1")
  }
  if ($(e.target).hasClass("test2")) {
    alert("test2 clicked")
  }
  if ($(".box").hasClass("open")) {
    $(this).css("background", "green")
  }
})

.box {
  margin: 4em 5em;
  background: steelblue;
  width: 15em;
  height: 8em;
  padding: .1em;
}
.clicker {
  width: 5em;
  background: lightgreen;
  padding: .2em;
  cursor: pointer;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="header">header</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test2 clicker">Test click 2</p>
</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test clicker">Test click 2</p>
</div>

感谢您的帮助

Answer 1

我认为只要调整条件就应该这样做

$(document).on("click", function(e) {
  //is there somthing like:
  // if `this` is not the box or children of box remove the
  // class `open` from box. this way if they click on header or body I could remove 
  //the `open` class from box

  var $target = $(e.target);

  var $clicker = $target.closest('.clicker');
  if ($clicker.length) {
    if ($clicker.hasClass("test")) {
      $('#clicked').html("test")
    } else if ($clicker.hasClass("test1")) {
      $('#clicked').html("test1")
    } else if ($clicker.hasClass("test2")) {
      $('#clicked').html("test2")
    }
  }

  var $box = $target.closest('.box');
  if ($box.length) {
    $box.addClass('open');
  } else {
    $('.box.open').removeClass('open');
  }
})

.box {
  margin: 4em 5em;
  background: steelblue;
  width: 15em;
  height: 8em;
  padding: .1em;
}
.box.open {
  background-color: lightgrey;
}
.clicker {
  width: 5em;
  background: lightgreen;
  padding: .2em;
  cursor: pointer;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">header:
  <div id="clicked"></div>
</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test2 clicker">Test click 2</p>
</div>
<div class="box">
  <p>this is the box</p>
  <p class="test1 clicker">Test click</p>
  <p class="test clicker">Test click 2</p>
</div>