2018-06-30

关于dom的事件传播机制

场景： Vue项目里点击一个菜品列表的一个item进去详细信息页，在点击item内部的加号按钮时同时触发了加号按钮监听的事件和点击item跳转的事件
解决方案：可以利用dom的事件流原理解决

关于dom的事件流

dom的事件流有两种模式，冒泡和捕获

冒泡模式：冒泡模式下事件从触发的element开始逐层往父节点传递
捕获模式：捕获模式顺序和冒泡模式反过来

由于历史原因现在默认是冒泡模式，要更改模式可以调用addEventListener接口把最后一个参数赋值true就行

具体实现

在我的项目中父对象是item子对象是i标签,大概如下的结构

1
2
3

<item>
  <i></i>
</item>

可以在父对象监听器调用的函数判断event的触发者

viewDetailedDish (d, event) {
    console.log(event.target.tagName)
    if (event.target.tagName === 'I') {
        console.log(this.dishes)
        console.log('prevent')
    } else {
        this.setDetailDish(d)
        this.$router.push({name: 'Details'})
    }
}