javascript - 我认为 stopPropagation() 破坏了我的鼠标事件 - 我该如何修复？

Question

我试图仅在我的开始 session 按钮被点击后检测文档中任意位置的点击。开始 session 按钮将 .waiting 类添加到 body。

我使用了 stopPropagation()，但我认为这破坏了一些向子元素添加悬停状态类的 mouseover/mouseout 功能。

问题是，一旦单击了 session 按钮和文档，尽管删除了 .waiting 类，但 mouseover/mouseout 功能仍然会发生。

请问修复我的代码的解决方案是什么？或者，对于我的用例来说，stopPropagation() 是一个坏主意吗？this article 。

下面有一个片段 - 只需单击按钮，将鼠标悬停在方 block 上，然后单击。问题是这些方 block 在悬停时仍然有红色轮廓。

$("#start-session").on("click", function(e) {
  $("body").addClass("waiting");

  $("body.waiting").children().mouseover(function(e) {
    e.stopPropagation();

    $(".el-hover").removeClass("el-hover");
    $(e.target).addClass("el-hover");
  }).mouseout(function(e) {
    $(e.target).removeClass("el-hover");
  });

  e.stopPropagation();
})

$(document).on("click", function(e) {

  if ($("body").hasClass("waiting")) {

    e.preventDefault()

    alert("Document was clicked");
    $("body").removeClass("waiting")
  }
})

#container {
  width: 200px;
  background: stealblue;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  margin: 50px;
}

.zone {
  background: #eee;
  border: 1px solid #ccc;
  padding: 15px;
}

.el-hover {
  outline: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="start-session">Start session</button>

<div id="container">
  <div class="zone"></div>
  <div class="zone"></div>
  <div class="zone"></div>
</div>

Answer 1

解决方案

引用评论中的@CBroe:

$("body.waiting").children().mouseover(...) applies the handler to all elements found at the time - the handler does not magically get removed, once body loses that class again. You’re trying to work against that by stopping propagation, but I think you’d be better off applying the handler only if that class is currently present to begin with. Using event delegation you could achieve that kind of “dynamism” - but for that you would have to go one level up here, so that you can use body in the selector - something like $(document).on('mouseover', 'body.waiting *', function(...) {})

更新代码段

$("#start-session").on("click", function(e) {
  $("body").addClass("waiting");

  $(document).on({
    mouseenter: function() {
      $(this).css({
        "outline": "1px solid red"
      })
    },
    mouseleave: function() {
      $(this).css({
        "outline": "0"
      })
    }
  }, 'body.waiting *');

  e.stopPropagation();
})

$(document).on("click", function(e) {

  if ($("body").hasClass("waiting")) {

    e.preventDefault()

    alert("Document was clicked");
    $("body").removeClass("waiting")
  }
})

#container {
  width: 200px;
  background: stealblue;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  margin: 50px;
}

.zone {
  background: #eee;
  border: 1px solid #ccc;
  padding: 15px;
}

.el-hover {
  outline: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="start-session">Start session</button>

<div id="container">
  <div class="zone"></div>
  <div class="zone"></div>
  <div class="zone"></div>
</div>