vue中阻止@click事件冒泡

最新推荐文章于 2024-05-13 08:44:21 发布
最新推荐文章于 2024-05-13 08:44:21 发布
阅读量2.3w 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue阻止冒泡 vue点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43868692/article/details/90605505
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <title>rem 使用</title>
  <script src="vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div class="box">
    <el-button class="Procedure-btn" type="primary" @click="selectProcedure()">
      <i @click.stop="deleteFlow()" class="el-icon-delete"></i>点击
    </el-button>
  </div>
</body>
<script>
  const app = new Vue({
    el: '.box',
    methods: {
      selectProcedure() {
        console.log('点击了按钮')
      },
      deleteFlow() {
        console.log('点击删除图标')
      }
    }
  })
</script>
</html>

如果我们不使用.stop的话，当点击图标的时候就会执行两个点击事件.

vue官方事件阻止方法https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

初来乍到到
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...
vue中阻止click事件冒泡（防止触发另一个事件）的方法
weixin_42365757的博客
08-25 4万+
方法一：使用vue阻止子级元素的click事件冒泡。简单得：可以直接用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。 方法二：可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @
Vue3事件冒泡
最新发布
油墨香^-^的博客
05-13 85
事件冒泡是指当一个元素上的事件被触发时，它会向父元素传播，直到到达文档的根节点。在JS中，事件冒泡是默认行为。这意味着，如果你在一个子组件上绑定了一个事件，当该事件被触发时，它会沿着组件树向上冒泡，直到到达根组件。
VUE的阻止冒泡事件
-拜托小羊
05-30 1496
vue中的阻止冒泡事件可以帮助我们实现当子盒子被点击时，父盒子不被触发对应的点击事件。
Vue中阻止事件冒泡
qq_42931285的博客
09-28 6545
Vue中阻止事件冒泡
vue绑定的点击事件阻止冒泡的实例
08-28
vue绑定的点击事件阻止冒泡的实例 在本篇文章中，我们将探讨如何在 Vue 中绑定点击事件，并阻止事件冒泡。事件冒泡是一种常见的事件机制，在 DOM 事件流中，事件会从最特定的事件目标到最不特定的事件目标...
vue 阻止事件冒泡常用的方法
花生日记
05-30 1万+
在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。2. event.stopPropagation()：在方法中使用，阻止事件冒泡。1. @click.stop：在模板中使用，阻止点击事件冒泡。
vue中阻止click事件冒泡，防止触发另一个事件
热门推荐
Iloveyougirls的博客
08-30 4万+
使用vue阻止子级元素的click事件冒泡，很简单，用stop 按钮1 按钮2 这样点击div里面的按钮1，就不会触发div绑定时间test1()方法
vue--点击事件阻止冒泡的方法
weixin_46820017的博客
10-31 6957
vue—click点击事件的冒泡行为 **1. click.stop就是外层包内层，内层写了.stop不会触发到外层的，只触发内层 .prevent就是阻止默认跳转链接，比如写了一个百度链接，没有 prevent会默认跳转到百度网页，写了这个prevent就会阻止自动跳转行为 .capture就是外层包内层，外层写了capture行为，只会触发外层，而内层是先触发外层，再触发内层 .self就是外层包内层，内层包按钮事件，内层写了.self行为，外层只会触发外层，内层先触发内层，再外层，点击按钮事件，先
vue click阻止冒泡_【微服务】138：Vue之各种指令的使用
weixin_39638526的博客
01-31 431
今天是刘小爱自学Java的第138天。感谢你的观看，谢谢你。学习计划安排如下：昨天初步接触了2个指令，继续学其它指令。这个指令数量有点多，有的一个指令还有多种用法，一次性全记下来显然不太现实，只能说随着今后不断地使用而加深记忆。一、v-on:click指令v-on指令用于给页面元素绑定事件。事件是有很多种的，这里以非常常见的点击事件为例做一个说明：①v-on:click这个写法对应的也就...
vue屏蔽点击事件
飞翔༒之翼
11-20 3858
思路如果不能点击就 return false： //调用,table的方法,展开/折叠 行 clickTable(row, column, cell, event){ if (column.label == '操作') { return false // 判断为"操作"栏的就不用展开table } else { this.$refs.refTable.toggleRowExpansion(row) } }, 就是这个操作，在点击整行是要展开的，但这样点
vue中的@click.stop阻止点击事件继续传播
qq_44417271的博客
06-28 616
<div id="app"> <div v-on:click="big"> <button v-on:click="small">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data:
vue 防止重复执行点击事件
weixin_48927323的博客
05-24 4248
在vue项目中防止用户在一定时间内频繁点击按钮触发事件 方法一: 在规定时间内将按钮禁用的方法： 主要思想就是禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击。 <template> <div> <div @click="clickHandle()">我是点击事件</div> </div> </template> <script> expor.
vue中click阻止事件冒泡，防止触发另一个事件
老电影故事的博客
02-25 582
在使用el-upload组件时，在其中放置了一个删除按钮的图片。 当点击图片，本想只删除上传的视频，但是意外触发了el-upload中的事件 解决方法： <i class="el-icon-plus avatar-uploader-icon deleteIcon" @click.stop="deleteImage"></i> 用stop，结果只删除当前预览，不触发上传事件 ...
【Vue3】自定义拖拽指令并阻止点击事件
JustID_的博客
10-26 1532
本文介绍以Vue指令的形式实现组件拖拽功能。
vue3中阻止事件冒泡
08-12
在Vue 3中，你可以使用`@click.stop`指令来阻止事件冒泡。例如： ```html <template> <div @click="parentClick"> <button @click.stop="childClick">Child Button</button> </div> </template> <script> export default { methods: { parentClick() { console.log('Parent clicked'); }, childClick() { console.log('Child clicked'); }, }, }; </script> ``` 在上面的例子中，当你点击"Child Button"时，只会打印出"Child clicked"，而不会触发"Parent clicked"。`@click.stop`指令会阻止事件继续向上传播到父元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值