简介
Vue提供了事件绑定的语法糖，我们在标签中可直接使用形如v-on:click，@click，@focus的形式绑定事件监听器，并且可以使用修饰符对事件进行option设置。本次解释下stop与capture的修饰符。stop是阻止事件传递，capture是在捕获的过程监听，没有capture修饰符时都是默认冒泡过程监听。
冒泡与捕获
首先我们需要形成监听器的思想。在不使用任何框架的情况下，我们在js中通过addEventListener方法给Dom添加事件监听。这个方法直译就是添加事件监听器。我们对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom（捕获过程），然后再从目标的Dom原路传出去（冒泡过程）。通常我们只监听冒泡过程。在vue中，当我们添加了事件修饰符capture后，才会变成捕获监听器。
点击标题或右边蓝色链接可打开我的另一篇文章JavaScript事件冒泡与捕获，查看更详细的解释。
图1.冒泡与捕获
如上图，我对4个div分别设置了冒泡监听器和捕获监听器。当我们点击最里层的div时，事件的传递过程如上图所示。log（）方法是我定义的，有在控制台输出的功能。点击一下“点击这里”，控制台会输出12344321。
stop阻止传递
上面已经说明了事件传递的过程，当我们随便在8个监听器中某一个添加.stop修饰。那么这个传递过程就会在此终止。
图2.传递中断
如上图，蓝色箭头部分，本该发生的传递被stop中断，因此最后只能输出123。
项目中的应用
捕获在项目中使用很少，我们一般使用stop来阻止事件冒泡。
图3.显示栗子
图4.代码栗子
我们做如上举例，当我们点击这条信息的div我们要“显示信息详情”，当我们点击删除按钮，我们要“删除这条信息”。现在的图4的代码是正确的，如果我们把button中click的修饰符stop去除，那么我们点击按钮时会先“删除这条信息”，再“显示信息详情”。没有阻止传递的情况下，因为事件的冒泡，div的click也会被触发。
目标Dom的特殊性
我们点击的目标Dom是有一点特殊的。目标Dom会先执行默认再捕获。这句话什么意思呢，我们依然举个栗子来说。如图5，我把冒泡输出加上.1与捕获做区分。我分别点击5号图层，4号a标签。
点击5号图层时我们出现的结果是【1 2 3 4 4.1 3.1 2.1 1.1】（正常）
点击4号标签时我们出现的结果是【1 2 3 4.1 4 3.1 2.1 1.1】（目标Dom特殊性）
我们点击目标Dom会使目标Dom上的冒泡监听先执行。
一般情况我们不会吧冒泡和捕获一起使用，甚至我们很少使用捕获。本特殊性实际应用几乎不会发生。
图5.目标Dom的特殊性
Vue事件修饰符（一）.stop .capture
Vue事件修饰符（二）.prevent .passive
Vue事件修饰符（三）.self连缀 （1月11日发）
Vue事件修饰符（四）.native .once （1月12日发）
网友评论