在下面的示例中，為什么單擊按鈕不僅會觸發添加到按鈕的事件偵聽器，還會觸發添加到正文的事件偵聽器？換句話說：為什么顏色會變成紅色而不是綠色？你如何防止這種情況發生？
$("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>uj5u.com熱心網友回復：
你的問題是事件傳播。當用戶使用您的原始代碼單擊按鈕時會發生什么：
- 事件處理程式觸發并將背景顏色更改為您指定的顏色 (#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>uj5u.com熱心網友回復：
問題的來源之一是單擊<button>內部會觸發元素和元素<body>的單擊事件。您需要使用來防止事件在 DOM 樹中冒泡。<body><button>event.stopPropagation()
$("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>uj5u.com熱心網友回復：
首先，您應該重新排列您的代碼。
其次，用于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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/421941.html
標籤：
上一篇：不同頁面的vuejs呼叫方法函式