js阻止事件传播/穿透（冒泡和捕获）

最新推荐文章于 2023-07-28 18:06:16 发布

VIP文章达瓦利什

最新推荐文章于 2023-07-28 18:06:16 发布

阅读量8.1k

点赞数 6

分类专栏： get亿个小知识点隔壁老奶奶都能看懂的javaScript 文章标签： javascript js html css

本文链接：https://blog.csdn.net/w_____w_____/article/details/109770264

版权

阻止事件传播

阻止事件传播的代码在最下面

//代码1
//在下面的代码中，我需要添加一个全局事件，但是改全局事件不能包括imitationSelect，
imitationSelect.onclick= function(){
   
        if(selectUl.style.display=="block"){
   
            selectUl.style.display='none';
        }else{
   
            selectUl.style.display='block';
        };
        if(fa.className=="fa fa-caret-up"){
   
            fa.className='fa fa-caret-down';
        }else{
   
            fa.className='fa fa-caret-up';
        };
        // fa.className='fa fa-caret-up';
        if(window.event){
             //if(window.event)即当触发事件时执行函数，单个对象时候可以不判断，但当对象多的时候可能会出bug
			//阻止事件传播，事件从点击的元素出发，向外（window）传播
            window.event.cancelBubble = true;
        }
    }

document.onclick=function(){
    //全局（除了imitationSelect）绑定点击事件  
        fa.className='fa fa-caret-down'; //箭头样式
        selectUl.style.display='none';
        show(liArr);
    }

实现我们先来了解一下js的捕获和冒泡事件
以下为我的浅显理解（仅供参考）
捕获事件
即从顶层元素向下直至目标元素，这个顶层元素包括document，甚至是window。
冒泡事件
即从目标元素向上直至顶层元素，顶层元素同上。
在这里插入图片描述
在w3c事件模型中

任何W3C事件模型中发生的事件都是先捕获，直到它到达目标元素，然后再向外冒泡。（即上图从右到左执行顺序为： 3 2 1 2 3）
而我们所写的事件会在捕获过程或者冒泡过程中触发，而我们通常用addEventListener来绑定元素，但实际上addEventListener还有第3个参数，即控制事件是在冒泡过程还是捕获过程中触发。

这个参数名字为useCapture，类型为布尔值（true false）,false为冒泡过程触发，true为捕获过程触发，默认为false。

值得一提的是onclick等绑定方法默认值也是在冒泡过程中触发的

//冒泡捕获具体的例子
//代码2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡与捕获</title>
</head>
<style>
    div{
   
        width: 50px;
        height: 50px

最低0.47元/天解锁文章

达瓦利什

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
js阻止事件传播/穿透（冒泡和捕获）

阻止事件传播//代码1//在下面的代码中，我需要添加一个全局事件，但是改全局事件不能包括imitationSelect，imitationSelect.onclick= function(){ if(selectUl.style.display=="block"){ selectUl.style.display='none'; }else{ selectUl.style.display='block'; }
复制链接

扫一扫