• 150455

    文章

  • 1095

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

js阻止事件传播/穿透(冒泡和捕获)


阻止事件传播

//代码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);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

实现我们先来了解一下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;
        background-color: yellow;
    }
    .father{
        width: 60px;
        height: 60px;
        background-color: red;
    }
    .grandpa{
        width: 70px;
        height: 70px;
        background-color: green;
    }
</style>
<body>
    <div class="grandpa">
        <div class="father">
            <div class="me">
                me
            </div>
        </div>
    </div>
</body>
    <script type="text/javascript">
        var me=document.getElementsByClassName('me')[0],
            father=document.getElementsByClassName('father')[0],
            grandpa=document.getElementsByClassName('grandpa')[0];
    
        // me.onclick=function(){
        //     alert('me')
        // }
        // father.onclick=function(){
        //     alert('father')
        // }
        // grandpa.onclick=function(){
        //     alert('grandpa')
        // }
        // document.onclick=function(){
        //     alert('document')
        // }
        me.addEventListener('click',()=>{
            console.log('me');
            alert('me');
        },true)
        father.addEventListener('click',()=>{
            console.log('father');
            alert('father');
        },true)
        grandpa.addEventListener('click',()=>{
            console.log('grandpa');
            alert('grandpa');
        },true)
        document.addEventListener('click',()=>{
            console.log('document');
            alert('document');
        },true)
        document.body.addEventListener('click',()=>{
            console.log('body');
            alert('body');
        },true)
        window.addEventListener('click',()=>{
            console.log('window');
            alert('window');
        },true)
    </script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78

如代码2所示,useCapture为true时,输出顺序为:
在这里插入图片描述
useCapture为false或者不设置时:
在这里插入图片描述
禁止冒泡和捕获事件

阻止冒泡事件
如代码1中所示 window.event.cancelBubble = true;
考虑兼容:

if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation();   //event.stopPropagation()
else 
    //否则,我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

阻止捕获事件
没找到,俺也不会(改成冒泡再阻止?)。

相信现在再看代码1就能看懂如何阻止全局事件在imitationSelect里触发了


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客