单击触发它创建的事件侦听器

在下面的示例中，为什么单击按钮不仅会触发添加到按钮中的事件侦听器，还会触发添加到主体中的事件监听器？换句话说：为什么颜色变为红色而不是绿色？你如何防止这种情况发生？

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

问题在于事件传播。当用户用你的原始代码点击按钮时会发生什么：

事件处理程序将触发并将背景颜色更改为您指定的颜色(#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>

问题的一个来源是单击<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>

首先，您应该重新排列代码。

其次，使用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>

相关内容

最新更新

热门标签：