Vue事件修饰符(一).stop .capture
简介
Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形式绑定事件监听器,并且可以使用修饰符对事件进行option设置。本次解释下stop与capture的修饰符。stop是阻止事件传递,capture是在捕获的过程监听,没有capture修饰符时都是默认冒泡过程监听。
冒泡与捕获
首先我们需要形成监听器的思想。在不使用任何框架的情况下,我们在js中通过addEventListener方法给Dom添加事件监听。这个方法直译就是添加事件监听器。我们对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom(捕获过程),然后再从目标的Dom原路传出去(冒泡过程)。通常我们只监听冒泡过程。在vue中,当我们添加了事件修饰符capture后,才会变成捕获监听器。
点击标题或右边蓝色链接可打开我的另一篇文章JavaScript事件冒泡与捕获,查看更详细的解释。
如上图,我对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上的冒泡监听先执行。
一般情况我们不会吧冒泡和捕获一起使用,甚至我们很少使用捕获。本特殊性实际应用几乎不会发生。
Vue事件修饰符(一).stop .capture
Vue事件修饰符(二).prevent .passive
Vue事件修饰符(三).self连缀 (1月11日发)
Vue事件修饰符(四).native .once (1月12日发)