美文网首页
事件冒泡和捕获

事件冒泡和捕获

作者: 白羽之鹰 | 来源:发表于2021-01-07 11:34 被阅读0次
    • 捕获的过程是从最外层的div到最里面的一层
    • 接着就是向外冒泡执行,如果想阻止冒泡可以使用e.stopPropagation()(要考虑兼容性)
    <body>
        <div onclick="console.log(4)">
            <div onclick="console.log(3)">
                <div onclick="console.log(2)">
                    <div  class="two">
                        点击
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        let two = document.querySelector('.two')
        two.onclick = (e)=>{
            console.log(1)
            e.stopPropagation()
        }
    </script>
    

    执行结果只打印了1,如果不阻止冒泡会打印1,2,3,4

    相关文章

      网友评论

          本文标题:事件冒泡和捕获

          本文链接:https://www.haomeiwen.com/subject/qpfzoktx.html