重新认识vue之事宜阻挠冒泡

近期用vue做了一个需求，大概是同一个地区，点击差别位置有差别的相应函数，另有个总的相应函数，好吧，以下图所示:

他们的DOM构造以下:

冒泡在这里的表现就是当用户点击图中事宜1或事宜2地区时，事宜3也会实行。这是由于时刻冒泡机制，致使点击&＃8217;handleClick1&＃8217;时&＃8217;handleClick3&＃8242; 也会相应。在大部分的时刻这都是不愿望的， 一样我这里也不愿望。
看下冒泡的典范形貌吧照样

图中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 把它传入要领。如:


Submit

// ...
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

vue中处置惩罚冒泡规范姿态

事宜修饰符

Vue.js 为 v-on 供应了事宜修饰符，修饰符是由点开首的指令后缀来示意的。这些事宜修饰符主要有以下几个:

• stop
• prevent
• capture
• prevent
• self
• once
• passive

看到没有，第一个&＃8217;stop&＃8217;就是我们想要的!
这些修饰符恰是为了处理这些题目而生的。也就说我们只须要在模板中如许写就搞定住手冒泡了。

很圆满有无，这就不用在事宜相应逻辑中去处置惩罚dom事宜细节了。
除 冒泡以外，vue供应的修饰符另有这些功用。