我的情況就像我有一個包裝器div和一個孩子div，console.log('any text')當我點擊包裝器時我正在做的事情div是安慰文本{這對我來說很有意義}但是當我點擊孩子時div它仍然會控制臺文本。{這很奇怪
let test = document.querySelector('.test')
test.addEventListener('click', function() {
console.log('wrapper clicked')
}).test{
width:100%;
heightL:100vh;
display: flex;
justify-content: center;
align-items:center;
}
.exam{
height: 100vh;
width: 50%;
color:white;
font-family:sans-serif;
display: grid;
place-items:center;
background: #000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="test">
<div class="exam">
<h1>Click Me</h1>
</div>
</div>
</body>
</html>對我來說}
所以我想知道為什么會發生這種情況就像我點擊孩子時div為什么它仍然會安慰文本一樣？以及如何使它僅在單擊包裝器而不是子項時控制臺文本？
uj5u.com熱心網友回復：
這是由于事件冒泡。看看這個。 什么是事件冒泡和捕獲？ 您可以將事件偵聽器直接附加到子級或使用event.target屬性交替檢查它
uj5u.com熱心網友回復：
在 javascript 中，當您將事件偵聽器添加到具有子代的標記時，如果您單擊子代，則會觸發該事件，因為子代繼承了事件偵聽器。
uj5u.com熱心網友回復：
因為它就像你的包裝器包含它的子元素，所以它肯定像你提到的那樣作業。所以，我的想法是你應該把文本放在包裝器之外。像這樣和一些css技巧。
let test = document.querySelector('.exam')
test.addEventListener('click', function() {
console.log('wrapper clicked')
}).test{
width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items:center;
background: red;
}
.exam{
height: 100vh;
width: 50%;
color:white;
font-family:sans-serif;
display: grid;
place-items:center;
background: #000;
position: relative;
}
.text {
position: absolute;
color:white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="test">
<div class="exam">
</div>
<h1 class="text">Click Me</h1>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/406167.html
標籤：