blocks|key|439664|text|在文档中，使用self事件修饰符只捕获来自元素本身的事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|439665|<div+id="largeArea"+v-on:click.self="do_X">|code-block|syntax|javascript|439666|​|439667|new+Vue({
++el:+'#app',
++methods:+{
++++do_X+()+{
++++++console.log(Date.now(),+'do_X')
++++}
++}
})|439668|#largeArea+{
++padding:+20px;
++border:+1px+solid+black;
}|439669|<script+src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div+id="app">
++<div+id="largeArea"+@click.self="do_X">
++++<button>Button</button>
++</div>
</div>|439670|439671|entityMap|0|LINK|mutability|MUTABLE|url|https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers^0|7|4|1|2|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|S|3|L|5|6|7|1C|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>From the <a href="https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers" rel="nofollow noreferrer">documentation</a>, use the <code>self</code> event modifier to only capture events originating on the element itself.</p>
<pre><code>&lt;div id=&quot;largeArea&quot; v-on:click.self=&quot;do_X&quot;&gt;
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
  el: '#app',
  methods: {
    do_X () {
      console.log(Date.now(), 'do_X')
    }
  }
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#largeArea {
  padding: 20px;
  border: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;
  &lt;div id="largeArea" @click.self="do_X"&gt;
    &lt;button&gt;Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1710048|text|我发现在子元素上使用“停止”事件修饰符对我有效。例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1710049|<div+id="app">
++<div+id="largeArea"+@click="do_X">
++++<button+@click.stop="do_Y">Button</button>
++</div>
</div>|code-block|syntax|javascript|1710050|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found that using the 'stop' event modifier on the child element worked for me.
eg</p>

<pre><code>&lt;div id="app"&gt;
  &lt;div id="largeArea" @click="do_X"&gt;
    &lt;button @click.stop="do_Y"&gt;Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1710092|text|两人都没有提供答案。在我的情况下，它封装在一个<router-link>中，而不是一个<div>中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1710093|我在子元素上调用了e.preventDefault()，它起作用了|1710094|<router-link>
++++<div+@click="do_X"></div>
</router-link>

new+Vue({
++el:+'#app',
++methods:+{
++++do_X+(e)+{
++++e.preventDefault();
++++++console.log(Date.now(),+'do_X')
++++}
++}
})|code-block|syntax|javascript|1710095|entityMap^0|N|D|17|5|0|9|I|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>Neither of the provided answers. In my situation it's wrapped in a <code>&lt;router-link&gt;</code> not a <code>&lt;div&gt;</code>.</p>
<p>I called <code>e.preventDefault()</code> on the child element and it worked</p>
<pre><code>&lt;router-link&gt;
    &lt;div @click=&quot;do_X&quot;&gt;&lt;/div&gt;
&lt;/router-link&gt;

new Vue({
  el: '#app',
  methods: {
    do_X (e) {
    e.preventDefault();
      console.log(Date.now(), 'do_X')
    }
  }
})
</code></pre>


blocks|key|1710126|text|防止容器<div>内的所有单击冒泡|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1710127|<div+@click.stop=""+class="action">

++<button+@click="someClickAction1()">Action+1</button>

++<button+@click="someClickAction2()">Action+2</button>

<div>|code-block|syntax|javascript|1710128|防止在现有单击操作上冒泡|1710129|<button+@click.stop="someClickAction()">Single+Action</button>|1710130|entityMap^0|4|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<h2>Prevent bubbling for all clicks inside a container <code>&lt;div&gt;</code></h2>
<pre><code>&lt;div @click.stop=&quot;&quot; class=&quot;action&quot;&gt;

  &lt;button @click=&quot;someClickAction1()&quot;&gt;Action 1&lt;/button&gt;

  &lt;button @click=&quot;someClickAction2()&quot;&gt;Action 2&lt;/button&gt;

&lt;div&gt;
</code></pre>
<h2>Prevent bubbling on an existing click action</h2>
<pre><code>&lt;button @click.stop=&quot;someClickAction()&quot;&gt;Single Action&lt;/button&gt;
</code></pre>


blocks|key|855966|text|我正在创建一个导航栏，并有类似的要求。我希望弹出菜单在点击任何地方时关闭，接受菜单或其子菜单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|855967|这可以通过使用事件修饰符来完成。在参考之前请参阅此文档|offset|length|855968|具体来说，我们可以使用stop事件修饰符。|style|CODE|855969|<div+id="largeArea"+v-on:click="do_X()">
++++<button+@click.stop="">Button</button>
</div>|code-block|syntax|javascript|855970|.stop将停止事件传播。|855971|在我的例子中，更好的解决方案是使用e.target+!=+this.$el|855972|mounted()+{
++++window.addEventListener('click',+(e)=>{
++++++++if(e.target+!==+this.$el)
++++++++++++this.showChild+=+false;
++++})
}|855973|entityMap|0|LINK|mutability|MUTABLE|url|https://v3.vuejs.org/guide/events.html#event-modifiers^0|0|P|2|0|0|B|4|0|0|0|5|0|H|K|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@$D|18|E|19|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1B|8|@$D|1C|E|1D|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1E|8|@$D|1F|E|1G|H|I]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1H|8|@]|9|@]|A|$M|N]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>I was creating a navigation bar and had similar requirements. I want the popup menu to be closed when clicked anywhere accept the menu or its children.</p>
<p>This can be done by using event modifiers. Fore reference see this <a href="https://v3.vuejs.org/guide/events.html#event-modifiers" rel="nofollow noreferrer">docs</a></p>
<p>Specifically, we can use <code>stop</code> event modifier.</p>
<pre><code>&lt;div id=&quot;largeArea&quot; v-on:click=&quot;do_X()&quot;&gt;
    &lt;button @click.stop=&quot;&quot;&gt;Button&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<p><code>.stop</code> will stop the event propagation.</p>
<hr />
<p>In my case better solution was to use <code>e.target != this.$el</code></p>
<pre><code>mounted() {
    window.addEventListener('click', (e)=&gt;{
        if(e.target !== this.$el)
            this.showChild = false;
    })
}
</code></pre>


<pre><code>&lt;div id="largeArea" v-on:click="do_X"&gt;
    &lt;button&gt;Button&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>So I have this issue in Vue where I don't want "do_X" to trigger when I click on the button, although its a part of the largeArea. </p>


Prevent event bubbling in Vue

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

<div id="largeArea" v-on:click="do_X">    <button>Button</button></div>因此，我在Vue中有一个问题，我不想在单击按钮时触发"do_X“，尽管它是largeArea的一部分。

问防止Vue中的事件冒泡
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止Vue中的事件冒泡EN