冒泡的表现

近期用vue做了一个需求，大概是同一个区域，点击不同位置有不同的响应函数，还有个总的响应函数，好吧，如下图所示:

他们的DOM结构如下:

登录后复制

冒泡在这里的表现就是当用户点击图中事件1或事件2区域时，事件3也会执行。这是因为时间冒泡机制，导致点击’handleClick1’时’handleClick3′ 也会响应。在大部分的时候这都是不希望的，同样我这里也不希望。
看下冒泡的经典描述吧还是

立即学习“前端免费学习笔记（深入）”；

图中4，5，6，7步骤就是冒泡阶段。

通用解决办法

事件冒泡了嘛，那就阻止事件冒泡呗。鉴于不同浏览器阻止事件冒泡方法不一样，建议手写一个事件阻止冒泡方法.

function stopPropagation(event){    var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容    if(window.event){       //这是IE浏览器        e.cancelBubble=true;    }else if(e && e.stopPropagation){     //这是其他浏览器        e.stopPropagation();//阻止冒泡事件    }}   // 使用

登录后复制

vue中解决办法

上述兼容方法，针对 event 和停止冒泡方法均做了兼容。但是在vue中需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。如:

// ...methods: {  warn: function (message, event) {    // 现在我们可以访问原生事件对象    if (event) event.preventDefault()    alert(message)  }}

登录后复制

因此这里我们可以简化一下上述停止冒泡方法:

function stopPropagation(event) {    if(event) {        event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;    }} evnet 为 $event

登录后复制