Question

阅读有关事件的Vue文档，他们提到了诸如阻止或停止之类的事件修饰符。他们在停止时提到：。我假设这将阻止事件冒泡。那么prevent呢。它到底是做什么的？我假设它会阻止事件被触发两次（例如双击）。这些假设是否正确？我在网上找不到更具体的信息。

我读到的内容：

Answer 1

.prevent或event.preventDefault() - 它会停止浏览器的默认行为（当您在<button type="submit">中点击<form>时会重新加载示例

.stop或event.stopPropagation() - 它阻止事件传播（或“冒泡”）DOM

.once - 该事件最多会被触发一次

Answer 2

这是 VueJs 2 中的一个实际示例：

<style>
    #stop-example > div {
        max-width: 300px;
        min-height: 150px;
        border: 2px solid black;
    }
</style>
<body>
    <div id="stop-example">
        <h3>without stop propagation</h3>
        <div @click="elClick($event)">
            <button @click="elClick($event)">Click Me</button>
        </div>
        <h3>with stop propagation</h3>
        <div @click="elClick($event)">
            <button @click.stop="elClick($event)">Click Me</button>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var stopEx = new Vue({
        el: '#stop-example',
        methods: {
            elClick: function(event) {
                alert("Click from "+event.target.tagName+"\nCurrent Target: "+event.currentTarget.tagName);
            }
        }
    })
</script>
</body>

这是它的工作原理
在第一个 div 元素上，(div) 元素的 (click) 事件由 (div) 和 (div) 的子元素处理，因为我们没有停止传播。
所以一旦你点击按钮，按钮的点击事件首先被触发，然后通过移动按钮的祖先来完成冒泡。
target 是处理事件的元素，而 currentTarget 可能是处理事件的元素或元素的祖先。
因此，当您单击第一个 (div) 上的按钮时，由于处理父级的单击事件，单击事件会触发两次。

Vue事件修饰符可防止与停止

2 个答案: