Vue.js框架:内层div事件触发,防止冒泡导致外层div事件一并触发的问题
一、问题如下
列表中点击列表项本身应该跳转到详情页面,点击列表项中的删除应该执行删除操作。
但由于删除在列表项的内部,所以点击删除时一并触发了外层的跳转详情页面操作。
二、问题处理
内层点击后触发外层的点击事件是因为html节点之间的嵌套结构,内层dom执行事件时会向外层冒泡,所以阻断冒泡的过程就可以使内层事件触发时不调用外部事件。
1、vue处理
@click.stop=""
vue中点击事件为@click,此处通过stop标注阻断,则点击事件触发时不会冒泡。
2、js处理
onClick="event.cancelBubble = true"
onClick="event.stopPropagation()"
在html中实现该效果时,直接在内部元素上加上该属性,同样可以阻止冒泡。
区别:
(1)event.cancelBubble = true不存在兼容问题,即包含IE在内的主流浏览器中都可以使用。但是问题是官方标注是已在web标准中舍弃,目前还可以使用,但是后期可能会废弃,不再支持。
(2)event.stopPropagation()目前是正在支持的使用方法,不过目前对IE8以下不兼容。