袁来如此的工作笔记
袁来如此的工作笔记
竹杖芒鞋轻胜马,谁怕? 一蓑烟雨任平生。

Vue事件修饰符.stop .capture

浏览量:58

简介
        Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形式绑定事件监听器,并且可以使用修饰符对事件进行option设置。本次解释下stop与capture的修饰符。stop是阻止事件传递,capture是在捕获的过程监听,没有capture修饰符时都是默认冒泡过程监听。

冒泡与捕获
        首先我们需要形成监听器的思想。在不使用任何框架的情况下,我们在js中通过addEventListener方法给Dom添加事件监听。这个方法直译就是添加事件监听器。我们对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom(捕获过程),然后再从目标的Dom原路传出去(冒泡过程)。通常我们只监听冒泡过程。在vue中,当我们添加了事件修饰符capture后,才会变成捕获监听器。

点击标题或右边蓝色链接可打开我的另一篇文章Javascript事件冒泡与捕获,查看更详细的解释。


stop阻止传递
        上面已经说明了事件传递的过程,当我们随便在8个监听器中某一个添加.stop修饰。那么这个传递过程就会在此终止。

项目中的应用
        捕获在项目中使用很少,我们一般使用stop来阻止事件冒泡。

        我们做如上举例,当我们点击这条信息的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上的冒泡监听先执行。
一般情况我们不会吧冒泡和捕获一起使用,甚至我们很少使用捕获。本特殊性实际应用几乎不会发生。

打赏