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

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>