前端Vue专辑让前端飞Vue驿站

Vue事件修饰符(一).stop .capture

2019-01-09  本文已影响1人  苏茶茉芳_亚泽伊

简介

        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日发)

前端豆知识,很小却有用

上一篇下一篇

猜你喜欢

热点阅读