前端開發過程中主要是通過以下三種方法來實現阻止事件冒泡
<!DOCTYPE html>
<html lang="en" onclick="handleClickHtml()">
<head>
<title>以這個html結構例舉</title>
</head>
<body onclick="handleClickBody()">
<div onclick="handleClickDiv()">
<button id="btn1" onclick="handleClickBtn1(event)">我是一個btn1按鈕preventDefault取消默認行為</button>
<button id="btn2" onclick="handleClickBtn2(event)">我是一個btn2按鈕stopPropagation取消后續事件捕獲和事件冒泡</button>
<button id="btn3" onclick="handleClickBtn3(event)">我是一個btn3按鈕return false</button>
<button id="btn4" >我是一個btn4按鈕函數式寫法</button>
</div>
</body>
<script>
function handleClickBtn1(e){
console.log(e);
console.log('點擊htn1');
e.preventDefault();
}
function handleClickBtn2(e){
console.log(e);
console.log('點擊htn2');
e.stopPropagation();
}
function handleClickBtn3(e){
console.log(e);
console.log('點擊htn3');
return false
}
var btn4 = document.getElementById('btn4');
btn4.onclick = function (e){
console.log(e);
console.log('點擊htn4');
return false
};
function handleClickDiv(){
console.log('點擊div');
}
function handleClickBody(){
console.log('點擊body');
}
function handleClickHtml(){
console.log('點擊html');
}
</script>
</html>
<!-- 事件冒泡的： 如果在div中發生點擊事件：那么click事件就在經過的結點上依次觸發，button < div < body < html < document < window -->
點擊了一下btn按鈕，結果它的整個dom結構的節點都依次觸發了
下面是三種處理事件冒泡的方法
1.使用preventDefault();
<button onClick={(e) => { e.preventDefault();}}>取消</button>
使用 e.preventDefault()
用於取消事件的默認行為，如果a標簽的默認事件是href跳轉，加了就不會跳轉了
2.使用stopPropapation()；
<button onClick={(e) => { e.stopPropagation();}}>取消</button>
使用 e.stopPropagation()
用於取消所有后續事件捕獲和事件冒泡
3.直接使用return false
<button onClick={(e) => { return false ；}}>取消</button>
據說是使用這個就會直接調用 preventDefault和stopPropapation，TM的我自己使用這個居然沒得一點效果，離譜，該冒的泡是一個都不會少啊