码迷,mamicode.com
首页 > 其他好文 > 详细

事件冒泡

时间:2019-04-06 20:30:00      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:cti   event   实现   body   根据   get   opp   var   状态   

<body>
    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <div id="div2">
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>
</body>

对于以上 html 代码结构,点击p1时候进入激活状态,点击其他任何p都取消激活状态,如何实现?

var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1, 'click', function (e) {
    e.stopPropatation() // 注释掉这一行,来体会事件冒泡
    alert('激活')
})
bindEvent(body, 'click', function (e) {
    alert('取消')
})

如果我们在p1 div1 body中都绑定了事件,它是会根据 DOM 的结构,来冒泡从下到上挨个执行的。但是我们使用e.stopPropatation()就可以阻止冒泡。

事件冒泡

标签:cti   event   实现   body   根据   get   opp   var   状态   

原文地址:https://www.cnblogs.com/mushitianya/p/10662708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!