事件的冒泡机制
通俗的讲就是指父元素与子元素分别有一个方法,在触发子元素方法的时候父元素的方法也被触发
如下图所示
创建一个div在div下创建一个button子元素,为div绑定一个名为divHandler的点击事件
为button绑定一个名为btnHandler的点击事件
我们希望实现
点击div域时会打印出(点击了inner div的点击事件)
点击按钮时会打印出(点击btn 按钮)
首先点击div
可以看到右边的控制台打印出了(点击了inner div的点击事件)
点击按钮
可以看到不但触发了button的点击方法也触发了div的点击方法
以上就是事件的冒泡机制的表现形式
下面是两种解决方法:
1.在事件触发的底层添加(.stop)
2.为div添加限定机制(.self)
1.在事件的底层添加stop
(stop方法可以彻底的阻止事件的冒泡机制)
2.为div添加限定机制
self方法的作用为:只有当点击当前元素时才会触发事件函数
(此方法解决冒泡有缺陷)
self解决冒泡机制的缺陷展示
最外层的div添加self
内层div不做处理
点击外层div
点击内层div
点击按钮
可以看到在触发了按钮事件的同时内层的div事件也触发了,
只有外层添加了self的div没有触发事件
以上就是事件的冒泡机制及解决方法的总结