Question

在Event Modifiers下的vue文档中，有一个名为capture的修饰符示例，其中包含以下内容：

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>

我已经做了一些搜索，但是没有找到关于如何修改事件绑定的明确答案，然后我想到了自己＆＃39;你知道谁总能找到答案吗？ Stack Overflow＆＃39;

Answer 1

所以发布后我偶然发现了this article，这清楚地说明了这一点。让我们说这个例子，你有三个元素嵌套在彼此之中：

<div class="outer">
    <div class="middle">
        <div class="inner"></div>
    </div>
</div>

当发生点击事件时，有两个阶段：第一阶段称为捕获，第二阶段称为冒泡。当您点击.inner时，事件会从最外面的容器元素.outer向下遍历.middle，然后在捕获中遍历.inner阶段，然后从.inner到.middle，再到冒泡阶段的.outer。

如果在.inner上为点击事件处理程序设置捕获：

<div class="outer">
    <div class="middle">
        <div class="inner" v-on:click.capture="doThis"></div>
    </div>
</div>

然后点击它，它会调用doThis(...)三次，第一次来自.outer，第二次来自.middle，第三次来自.inner。

如果在.middle上为点击事件处理程序设置捕获

<div class="outer">
    <div class="middle" v-on:click.capture="doThis">
        <div class="inner"></div>
    </div>
</div>

然后点击它，它会拨打doThis(...)两次，第一次来自.outer，第二次来自.middle

Answer 2

一个元素上的气泡和捕获事件处理程序都将仅被触发一次，不同之处在于它们被触发的时间（子对象之前之前，之后孩子）。捕获模式意味着在子元素上的任何处理程序之前触发处理程序。冒泡模式（默认），意味着在所有子元素完成其处理程序后触发处理程序。您甚至可以通过执行<div v-on:click="doThis" v-on:click.capture="doThis">

来放置捕获模式和冒泡模式事件处理程序

此JS fiddle演示了如何单击嵌套的内部元素首先如何以“从外到内”的顺序触发捕获处理程序，然后再以“从内到外”的顺序触发气泡处理程序。

什么是事件监听器上的捕获模式

2 个答案: