Question

我只是在点击了我的开始会话按钮后，才尝试检测文档上的任何位置。 “开始会话”按钮会将.waiting类添加到body。

我使用过stopPropagation()，但我认为这会打破一些{hoo}功能，为子元素添加悬停状态类。

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

请修改我的代码的解决方案是什么？或者，.waiting对于我的用例 this article 是个坏主意。

下面有一个片段 - 只需点击按钮，将鼠标悬停在方块上，然后点击即可。问题是正方形在悬停时仍然有红色轮廓。

stopPropagation()

$("#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; }

Answer 1

<强>解决方案

从评论中引用@CBroe：

$("body.waiting").children().mouseover(...)将处理程序应用于当时找到的所有元素 - 一旦主体再次丢失该类，处理程序就不会神奇地被删除。你试图通过停止传播来解决这个问题，但我认为只有当该类当前存在时才应用处理程序会更好。使用事件委托你可以实现那种“活力” - 但是为此你必须在这里达到一级，这样你就可以在选择器中使用body - 类似于$(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>

我认为stopPropagation（）会破坏我的鼠标事件 - 我该如何修复？

1 个答案: