zoukankan      html  css  js  c++  java
  • stopPropagation 和stopImmediatePropagation区别

    1、示例代码

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>stopPropagation 和stopImmediatePropagation区别</title>
        </head>
    
        <body>
            <div id="app1">
                <div id="app2">
                    <div id="app3">
                        test
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                let app1 = document.getElementById('app1'),
                    app2 = document.getElementById('app2'),
                    app3 = document.getElementById('app3');
                app1.addEventListener('click', e => {
                    alert('第二次执行')
                },false)
                app3.addEventListener('click', e => {
    //                e.stopPropagation()
    //                e.stopImmediatePropagation()
                    alert('第一次执行')
                },false)
                app3.addEventListener('click', e => {
                    alert('app2第二次执行')
                },false)
            </script>
        </body>
    
    </html>

    2、区别

    stopPropagation 和stopImmediatePropagation都能防止事件向父节点冒泡。

    stopImmediatePropagation还能阻止该元素剩余的其他事件处理函数的执行。即加上dom1上绑定了2个click事件,在第一个click事件上执行了e.stopImmediatePropagation()后,第二个click事件不会执行。

    参考:http://www.365mini.com/page/jquery-event-stopimmediatepropagation.htm

  • 相关阅读:
    grid 布局
    mongoose
    Nestjs 上传文件
    Nestjs 设置静态文件,public
    Centos 为Nginx 搭建https
    react组件
    namecheap 添加二级域名
    electron+react
    遍历文件,读取.wxss文件,在头部添加一条注释
    react 中的绑定事件
  • 原文地址:https://www.cnblogs.com/mengfangui/p/10216191.html
Copyright © 2011-2022 走看看