在Event Modifiers下的vue文档中,有一个名为 capture
的修饰符示例,它声明如下:
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
我进行了一些搜索,但没有找到关于这如何修改事件绑定(bind)的明确答案,然后我心想‘你知道谁总是有答案吗?堆栈溢出'
最佳答案
所以在发布后我偶然发现了 this article这清楚地说明了这一点。对于这个例子,假设您有三个相互嵌套的元素:
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
当点击事件发生时,有两个阶段:第一个阶段称为捕获,第二个阶段称为冒泡。当你点击.inner
时,事件从最外层的容器元素.outer
向下遍历,到.middle
,再到 .inner
在capturing阶段,然后从.inner
到.middle
,再到.outer
在冒泡阶段。
如果在 .inner
上为点击事件处理程序设置了 capture:
<div class="outer">
<div class="middle">
<div class="inner" v-on:click.capture="doThis"></div>
</div>
</div>
然后你点击它,它会在捕获阶段点击.outer
,然后是.middle
,然后是.inner
,这将导致 doThis(...)
被调用,之后冒泡阶段开始。
如果在 .middle
上为点击事件处理程序设置了 capture
<div class="outer">
<div class="middle" v-on:click.capture="doThis">
<div class="inner"></div>
</div>
</div>
然后你点击它,它会命中.outer
,然后是.middle
,在捕获阶段,这会导致doThis(...)
被调用,然后在捕获阶段点击 .inner
,之后冒泡阶段开始。
编辑:感谢下面所有的精彩回复,我已经修改了答案以修复我不正确的地方。
关于vue.js - 什么是事件监听器的捕获模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41992865/