Vue中@click.stop和@click.prevent实例详解

年少再无少年

一、@click.stop（阻止事件冒泡）

1. @click.stop：阻止事件冒泡，即阻止点击事件从子组件向父组件传播。

复制代码

案例：我们在父元素中添加了一个click事件A，并且在其下的子元素中也添加了一个click事件B。
这时我想点击子元素触发子元素的点击事件，但实际上会先触发子组件的事件，然后触发父组件的事件。

1. <div class='handle-box' @click="clickBox">
   
2.                 <div @click="handleClick('新增')"><text>新增</text></div>
   
3.                 <div @click="handleClick('修改')"><text>修改</text></div>
   
4.                 <div @click="handleClick('删除')"><text>删除</text></div>
   
5. </div>

复制代码

需要使用阻止事件冒泡（也即阻止点击事件继续传播）来解决此问题，
将子组件中的@click改为@click.stop即可：

1. <div class='handle-box' @click="clickBox">
   
2.                 <div @click.stop="handleClick('新增')"><text>新增</text></div>
   
3.                 <div @click.stop="handleClick('修改')"><text>修改</text></div>
   
4.                 <div @click.stop="handleClick('删除')"><text>删除</text></div>
   
5. </div>

复制代码

二、@click.prevent（阻止事件的默认行为）

1. @click.prevent：阻止事件的默认行为。它会阻止触发dom的原始事件，而只执行我们自定义的事件。

复制代码

例如：在代码里写入一个

1. <a>

复制代码

标签，在点击

1. <a>

复制代码

标签时，会默认触发一次跳转，跳转到目标URL：

1. <div>
   
2.         <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  target='_blank'>百度</a>
   
3. </div>

复制代码

但如果我们不想让它跳转，而是在点击

1. <a>

复制代码

标签时执行我们的自定义方法，那就需要用到@click.prevent啦！用法如下：

1. <div>
   
2.         <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"   target='_blank' @click.prevent='handleClick('修改')'>百度</a>
   
3. </div>

复制代码

这时再点击

1. <a>

复制代码

标签，就不会跳转到目标URL啦，而是会执行我们自定义的handleClick(‘修改’)事件。

附：Vue @click.stop阻止事件向祖先元素传递（事件冒泡）


任何事件都不触发

1. <template>
   
2.   <div @click="fun">
   
3.     <div @click.stop>
   
4.       <!--子div-->
   
5.     </div>
   
6.   </div>
   
7. </template>
   
8. 
   
9. <script>
   
10. export default {
    
11.   methods: {
    
12.     fun() {
    
13.       // 点击父div时执行的功能
    
14.       console.log('单击了父div');
    
15.     },
    
16.   },
    
17. }
    
18. </script>

复制代码

不触发父级事件，触发属于自己的事件

1. <template>
   
2.   <div @click="doSomething">
   
3.     <button @click.stop="doSomethingElse">不会触发父级元素的点击事件</button>
   
4.   </div>
   
5. </template>
   
6. <script>
   
7. export default {
   
8.   methods: {
   
9.     doSomething() {
   
10.       console.log('doSomething')
    
11.     },
    
12.     doSomethingElse() {
    
13.       console.log('doSomethingElse')
    
14.     }
    
15.   }
    
16. }
    
17. </script>

复制代码

总结

到此这篇关于Vue中@click.stop和@click.prevent详解的文章就介绍到这了,更多相关Vue中@click.stop和@click.prevent内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/31906532v.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！