我认为stopPropagation（）破坏了鼠标事件-如何解决？

Question

I am trying to detect clicks anywhere on the document only after my start session button has been clicked. The start session button adds a .waiting class to the body .

I have used stopPropagation() , but I think this is breaking some mouseover/mouseout functionality that adds a hover state class to child elements.

The issue is that once the both the session button and document has been clicked, mouseover/mouseout functionality still happens despite removal of the .waiting class.

What is the solution to fix my code please? Or, is stopPropagation() a bad idea for my use case given this article .

There is a snippet below - just click the button, hover over the squares and then click. The problem is the squares still have red outline on hover.

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

Solution

To quote @CBroe from the comments:

$("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(...) {})

Updated snippet

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