单击触发它创建的事件侦听器
[英]Click Triggers Event Listener That It Creates
问题描述
在下面的示例中，为什么单击按钮不仅会触发添加到按钮的事件侦听器，还会触发添加到正文的事件侦听器？ 换句话说：为什么颜色会变成红色而不是绿色？ 你如何防止这种情况发生？
$("button").on("click", function() { // Change Color $("body").css({ "background-color": "#3FE1B0" }); // Add New Event Listener... $("body").on("click", function() { //...Which Also Changes Color $(this).css({ "background-color": "#FF4F5E" }); }); });
/* Design Changes */ body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <button>Click Me!</button>
3 个解决方案
解决方案1
1 2022-01-27 21:53:26
你的问题是事件传播。 当用户使用您的原始代码单击按钮时会发生什么：
- 事件处理程序触发并将背景颜色更改为您指定的颜色 (#3FE1B0)
- 事件处理程序也被添加到正文中以将颜色更改为#FF4F5E
- 事件向上传播到其父元素，包括在链的末端，主体
- 所以主体上的事件处理程序运行（它只是刚刚添加的事实没有区别），所以颜色会变成你不想要的颜色
解决方案很简单：使用事件的stopPropagation方法来阻止它向上传播：
$("button").on("click", function(event) { // Change Color $("body").css({ "background-color": "#3FE1B0" }); // Add New Event Listener... $("body").on("click", function() { //...Which Also Changes Color $(this).css({ "background-color": "#FF4F5E" }); }); event.stopPropagation(); });
/* Design Changes */ body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <button>Click Me!</button>
解决方案2
0 2022-01-27 21:53:01
问题的来源之一是单击<body>内的<button>会触发<body>元素和<button>元素的单击事件。 您需要使用event.stopPropagation()来防止事件冒泡 DOM 树。
$("button").on("click", function(e) { $("body").css({ "background-color": "#3FE1B0" }); e.stopPropagation(); }); $("body").on("click", function(e) { $("body").css({ "background-color": "#FF4F5E" }); });
body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; }
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Page Title</title> </head> <body> <button>Click Me!</button> </body> </html>
解决方案3
0 2022-01-27 21:53:03
首先，您应该重新排列您的代码。
其次，使用stopPropagation来防止触发两个点击处理程序。
试试下面的例子：
$("body").on("click", function(e) { $(this).css({ "background-color": "#FF4F5E" }); }); $("button").on("click", function(e) { e.stopPropagation() $("body").css({ "background-color": "#3FE1B0" }); });
/* Design Changes */ body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <button>Click Me!</button>
事件监听器在扩展图标点击时触发，而不是弹出按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.