前端开发过程中主要是通过以下三种方法来实现阻止事件冒泡
<!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
下面是三种处理事件冒泡的方法
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>4、综合代码示例如下:
event.stopPropagation(); //1.停止事件冒泡，但是不会阻止默认行为
return false; // 2.阻止事件冒泡，也阻止了默认行为
event.preventDefault(); // 3.阻止默认行为，不阻止事件冒泡return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
事件流总共3个阶段：事件捕获，到达目标，事件冒泡 事件捕获是从外层到里层到body这一层就结束，到达目标即触发事件的节点的过程一般是指body里的那一层，事件冒泡是从里层到外层
本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4176
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 