js中阻⽌事件冒泡的⼏种⽅法
前端开发过程中主要是通过以下三种⽅法来实现阻⽌事件冒泡
<!DOCTYPE html>
js调用方法的三种写法<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 = ElementById('btn4');
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的我⾃⼰使⽤这个居然没得⼀点效果，离谱，该冒的泡是⼀个都不会少啊
事件流总共3个阶段：事件捕获，到达⽬标，事件冒泡事件捕获是从外层到⾥层到body这⼀层就结束，到达⽬标即触发事件的节点的过程⼀般是指body⾥的那⼀层，事件冒泡是从⾥层到外层

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。