vue中阻止click事件冒泡，防止触发另一个事件

最新推荐文章于 2024-03-04 09:39:17 发布
最新推荐文章于 2024-03-04 09:39:17 发布
阅读量4.5w 收藏 8
点赞数 6
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Iloveyougirls/article/details/77726872
版权

使用vue阻止子级元素的click事件冒泡，很简单，用stop

<div @click="test1()">
            <span @click.stop="test2()">按钮1</span>
            <span>按钮2</span>
</div>
这样点击div里面的按钮1，就不会触发div绑定时间test1()方法

iloveyougirls
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
下面小编就为大家分享一篇vue监听滚动事件 实现某元素吸顶或者固定位置显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue绑定的点击事件阻止冒泡的实例
11-29
当我们在使用vue做项目时，经常用到点击事件的绑定，但是我们绑在一个div上，里面的其他按钮（如删除、修改）等按钮也会加载这儿div的点击事件，而事实我们不需要，如何解决： 首先我们来区分事件冒泡、事件捕获是什么 （1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window （2）捕获型事件(event capturing)：事件从最不精确的对象(document 对
Vue组件点击事件不触发的问题，添加事件修饰符native解决
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 5596
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
vue防重复点击的几种实现
灰色头像@的博客
04-17 6266
项目开发过程中发现，在手速快的情况下，vue的组件点击事件会被连续触发多次。这个问题会产生一些意想不到的bug。下面我们提供几种解决办法;" > 快速连续点击 < / div > < / div > < / template > < script > export default {return {let timersearch() {
在 vue3 中用 event.stopPropagation() 方法阻止冒泡触发事件
lan_zh的专栏
11-28 2382
方法可以阻止事件的默认行为，但是它不会影响事件的冒泡行为。在 Vue 3 中，同时存在事件时，例如@click 事件，那么当用户点击的时候，默认会先触发。可以用于阻止链接的默认跳转行为或提交表单等默认操作。通常我们在触发子标签的时候，我们不需要触发。点击事件，然后再冒泡触发。的事件，那么需要用到。在vue 3 中，当。
vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
热门推荐
涂涂
01-18 15万+
其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown....... 以下click为例 注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click 1.监听事件 可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是
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()方法。 方法二：可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @
Vue的事件处理，点击事件
qq_46149597的博客
11-03 1万+
vue点击事件，事件处理：事件修饰符、按键修饰符、鼠标修饰符、v-bind修饰符、v-model修饰符
vue click阻止冒泡_【微服务】138：Vue之各种指令的使用
weixin_39638526的博客
01-31 414
今天是刘小爱自学Java的第138天。感谢你的观看，谢谢你。学习计划安排如下：昨天初步接触了2个指令，继续学其它指令。这个指令数量有点多，有的一个指令还有多种用法，一次性全记下来显然不太现实，只能说随着今后不断地使用而加深记忆。一、v-on:click指令v-on指令用于给页面元素绑定事件。事件是有很多种的，这里以非常常见的点击事件为例做一个说明：①v-on:click这个写法对应的也就...
浅析事件冒泡和解决方式（vue）
SundayGoG的博客
06-02 3044
事件冒泡，解决方式，事件捕获
vue 阻止事件冒泡和捕获
学习 记录 总结 分享
05-10 4085
阻止事件冒泡: 阻止事件默认行为: 事件只作用在元素本身，而不是其子元素要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法。
vue中click阻止事件冒泡，防止触发另一个事件
老电影故事的博客
02-25 555
在使用el-upload组件时，在其中放置了一个删除按钮的图片。 当点击图片，本想只删除上传的视频，但是意外触发了el-upload中的事件 解决方法： <i class="el-icon-plus avatar-uploader-icon deleteIcon" @click.stop="deleteImage"></i> 用stop，结果只删除当前预览，不触发上传事件 ...
vue 内部点击事件禁止外部点击事件执行 @click.stop
小武的博客
11-17 2186
html代码 (内部方法点击加一个.stop即可)： div@click="clickWai()"> 我是小武，外部 <div@click.stop="clickNei()">我是内部点击事件</div> </div> js代码： methods: { clickWai(){ console.log("外边事件点击"); }, clickNei(){ cons...
关于在Vue中如何阻止子元素触发父元素的事件
weixin_51747462的博客
04-18 2213
关于在Vue中如何阻止子元素触发父元素的事件
【vue】阻止默认事件发生
Evan_QB的博客
05-08 4107
1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件仍然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；3.return false ；这个方法比较暴力，...
VUE初学---事件处理 v-on:click、v-on:keyup
qq_42970981的博客
11-22 3703
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处： 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。 因为你无...
vue 阻止事件冒泡常用的方法
花生日记
05-30 1万+
在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。2. event.stopPropagation()：在方法中使用，阻止事件冒泡。1. @click.stop：在模板中使用，阻止点击事件冒泡。
js拖拽时禁止触发单击事件的方法三种方法
first_shun的博客
09-26 5324
在一个元素既有拖拽事件，又有单击事件的时候，会发现每一次拖拽后都会触发元素的单击事件，所以我们得在拖拽事件的时候屏蔽掉元素的单击事件所绑定的方法。元素拖拽和单击事件触发的顺序是mosuedown,mousemove,mouseup,click，所以就需要针对这个事件顺序在拖拽的时候屏蔽单击事件。主要有以下三种方法来在拖拽事件中屏蔽掉单击事件的执行： 1、监听mousemove事件，在mousemove中加状态，在click事件中监听该状态 var elIsMove = ...
vue3中阻止事件冒泡
08-12
在Vue 3中，你可以使用`@click.stop`指令来阻止事件冒泡。例如： ```html <div @click="parentClick"> <button @click.stop="childClick">Child Button export default { methods: { parentClick() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值