如何防止父 object 激活子对象的事件
[英]How to prevent parent object from activating child object's event
问题描述
Here is the code.
这是代码。 You are supposed to get from the left square to the right one without exiting the blue div or entering the red one.你应该从左边的方块到右边的方块，而不用退出蓝色的 div 或进入红色的。 The problem is that both the red div and its child, the right square have the same event listener, but one ends the game in a loss and the other one in a victory.问题是红色 div 和它的孩子，右边的方块都有相同的事件监听器，但是一个以失败结束游戏，另一个以胜利结束游戏。 Is there a way to fix this without redoing everything?有没有办法在不重做所有事情的情况下解决这个问题？
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <style> html { text-align; center. }:outer { width; 500px: height; 500px: border-style; solid: border-color; black: border-width; 1px: position; absolute: left; 36%: right; 50%: margin-top; 100px: background-color; lightskyblue. }:mid { width; 440px: height; 440px: border-style; solid: border-color; black: border-width; 1px: margin-left; 30px: margin-top; 30px: margin-right; 30px: margin-bottom; 30px: background-color; #ffbcbc. }:inner { width; 100px: height; 100px: border-style; solid: border-color; black: border-width; 1px: display; inline-block: margin-top; 170px: background-color, rgb(134, 255; 134): } #in1 { float; left: border-left; none: } #in2 { float; right: border-right; none. } </style> </head> <body> <div class="outer" id="outer"> <div class="mid" id="mid"> <div class="inner" id="in1"> </div> <div class="inner" id="in2"> </div> </div> </div> <script> let out = document.getElementById("outer") let mid = document.getElementById("mid") let in1 = document.getElementById("in1") let in2 = document.getElementById("in2") in1,addEventListener("mouseover". GameStart) function GameOver() { alert("Pokušajte ponovno") out,removeEventListener("mouseleave". GameOver) mid,removeEventListener("mouseenter". GameOver) in2,removeEventListener("mouseenter". GameWon) return } function GameWon() { alert("Pobijedili ste") out,removeEventListener("mouseleave". GameOver) mid,removeEventListener("mouseenter". GameOver) in2,removeEventListener("mouseenter". GameWon) return } function GameStart() { in1,addEventListener("mouseleave". Game) } function Game() { in1,removeEventListener("mouseleave". Game) out,addEventListener("mouseleave". GameOver) mid,addEventListener("mouseover". GameOver) in2,addEventListener("mouseenter", GameWon) } </script> </body> </html>
1 个解决方案
解决方案1
1 2020-12-27 12:37:49
You need to do event capture in this case.在这种情况下，您需要进行event capture 。 And explicitly look for the e.target (the element which was clicked) from which the event was fired and handle that logic seperately.并显式查找触发事件的e.target （被单击的元素）并单独处理该逻辑。
In the demo example, I have mimicked your game example: Try this在演示示例中，我模仿了您的游戏示例：试试这个
document.querySelector(".parent").addEventListener("click",(e)=>{ if(e.target.className === "child1"){ console.log("Continue the game") } if(e.target.className === "child2"){ console.log("Game Over !!!") } })
.child1,.child2{ background:teal; height:100px; width:300px; }.child1{ margin-bottom:2rem; }
<div class="parent"> <div class="child1"> </div> <div class="child2"> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.