目的: 停止event預設動作 - 停止往上冒泡處理說明:1> Label 的event flow 為 bubble 方式時
2> 觸發 lbl.onclick event後 , console 顯示 "lbl click"
瀏覽器將 click event 自動往下傳, 即傳給 checkbox.click event
3> 因 checkbox event 為 bubble 方式,所以又往上傳給 lbl
即觸發 lbl.onclick event , concole 又顯示 "lbl click"
--> 即 lbl.onclick event 被觸發兩次
一.要阻擋事件向上冒泡傳遞:
--> event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<h1>Hi friend, try edit me!</h1>
<label class="lbl">
Label <input type="checkbox" name="chkbox" id="chkbox" />
</label>
// label
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<h1>Hi friend, try edit me!</h1>
<label class="lbl">
Label <input type="checkbox" name="chkbox" id="chkbox" />
</label>
// label
<script>
var lbl = document.querySelector('.lbl');
var chkbox = document.querySelector('#chkbox');
lbl.addEventListener('click', function (e) {
console.log('lbl click');
}, false);
console.log('lbl click');
}, false);
chkbox.addEventListener('click', function (e) {
console.log('chkbox click');
}, false);
</script>
<script src="src/script.js"></script>
</body>
</html>
-->
chkbox.addEventListener('click', function (e) {
console.log('chkbox click');
e.stopPropagation();
console.log('chkbox click');
e.stopPropagation();
}, false);
var link = document.querySelector('#link');
// 在 evend handler 加上 e.preventDefault();
link.addEventListener('click', function (e) {
e.preventDefault();
console.log('Google!');
}, false);
console.log('Google!');
}, false);
沒有留言:
張貼留言