Vue中取消事件冒泡的方式

最新推荐文章于 2024-03-15 13:43:03 发布
最新推荐文章于 2024-03-15 13:43:03 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42202992/article/details/128989254
版权

Vue中取消事件冒泡的方式

1. 使用event

function boxHandler(event,msg){
  event.stopPropagation();//取消事件传播
  alert(msg)
}

2. 使用vue提供的stop

function boxHandler2(msg){
  alert(msg)
}

<div class="box1" @click="boxHandler2('box1')">
      box1
      <div class="box2" @click.stop="boxHandler2('box2')">
        box2
        <div class="box3" @click.stop="boxHandler2('box3')">
          box3
        </div>
      </div>
 </div>
*郑*
关注
专栏目录
阻止冒泡事件 2020/11/24
weixin_50286102的博客
11-24 223
stopPropagation() 语法 event.stopPropagation(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
事件的冒泡与冒泡的取消方法
qq_45716607的博客
04-28 940
1事件冒泡 如果一个元素触发事情，那么其所有祖先元素都会依次执行触发该事件，这种机制称为冒泡 （好比气泡从水底下一直向上冒泡，像dom树一样，一直到根元素。） 2事件捕获 捕获与事件冒泡刚好相反 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
Vue 阻止事件冒泡
PB瓦工
01-17 2948
【代码】Vue 阻止事件冒泡。
jquery取消事件冒泡的三种方法
热门推荐
typ0520的专栏
04-11 3万+
1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　 } ); 2、通过使用 preventDefault() 方法只取消默认的行为。 jQuery 代码: $("form").bind(
Vue如何阻止事件冒泡
麻球科技
03-02 2615
如何 解决 vue里面的 冒泡事件 方案如下： a v-on:click.stop="doThis">a>   form v-on:submit.prevent="onSubmit">form>   a v-on:click.stop.prevent="doThat">   form v-on:submit.p
JS阻止事件冒泡
harcdy的专栏
04-13 177
自:http://zhidao.baidu.com/question/164284686.html?an=0&si=6 IE的event和其他的标准DOM的Event是不一样的，不同的浏览器事件的冒泡机制也是有区别 IE： window.event.cancelBubble = true;//停止冒泡 window.event.returnValue = false;//阻止事件的...
vue中解决事件冒泡
qq_39890794的博客
05-15 594
例: clickDiv（）{ console.log(“点击了DIV”) } clickBtn（）{ console.log(“点击了btn”) } 当我们点击按钮的时候，控制台就会出现：“点击了btn”和“点击了DIV”， 解决： 1、<button @click.stop=“clickBtn”>按钮 加一个stop 2、<button @click="clickBtn(event)">按钮</button>加一个参数event)">按钮</button&g
聊聊vue中的修饰符，常用事件修饰符【总结】
m0_60150712的博客
08-02 415
本篇文章会带大家聊一聊vue指令中的修饰符，对比vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
vue,事件冒泡与取消默认事件
gary的博客
08-14 1万+
不解释，直接贴代码                        大按钮                                                    小按钮                                    跳转到本页
vue3取消事件
05-31
在Vue3中，取消事件可以通过事件对象的preventDefault()方法和stopPropagation()方法来实现。 1. 取消默认行为 在事件处理函数中，可以通过事件对象调用preventDefault()方法来取消默认行为。例如： ``` ...
Vue阻止事件冒泡的两种方式
雨天的麦子的博客
10-09 6168
1.阻止事件冒泡方式1 如下有父子标签的点击事件 在子类中调用stopPropagation()方法即可禁止事件的传递 boxClick:function () { alert("父标签被点击"); }, subClick:function (event) { event.stopPro...
vue生命周期函数原理解析，vue阻止事件冒泡方法实现
最新发布
景天科技苑
03-15 1795
生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；
JS - 取消事件冒泡
BarryLee的博客
02-09 2858
JavaScript的事件冒泡确实很有用（大多数情况下），但是有时确实不想它冒泡，那么可以通过以下方式取消 元素.事件 = function( event ) { // 解决兼容问题 event = event || window.event; // 将cancenBubble属性设置为false即可 event.cancelBubble = true; } ...
取消事件冒泡，取消默认行为
lililiaaa的博客
11-11 774
取消事件冒泡 标准浏览器：e.stopPropagation; IE浏览器:window.event.cancelBubble=true;（为了做兼容，如果在前面写明e=e||window.event;IE里面就是e.cancelBubble=true;） 阻止事件行为 阻止事件默认行为： e.preventDefault(); IE:e.returnValue = false ; 阻止鼠标右键的...
取消事件冒泡（大小DIV）
初学者
04-23 442
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 取消事件冒泡 #mybigdiv{ width:300px; height:300px; border:1px solid pink;
vue3.0取消事件冒泡
ClearClever的博客
05-06 3356
element plus取消事件冒泡造成的影响，代码示例为el-dropdown标签。 <div @click="doSomething"> <span @click="stopPropagation($event)"> <el-dropdown trigger="click"> <template #dropdown> <el-dropdown-menu> &lt
Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
王佳斌
02-27 2481
vue3，element plus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，element plus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
vue 取消鼠标移除事件
09-12
在Vue中取消鼠标移除事件可以通过以下几种方式实现： 1. 使用`@mouseout`事件代替`@mouseleave`事件：一般情况下，我们可以在模板中使用`@mouseout`事件来代替`@mouseleave`事件。`@mouseout`事件会在鼠标离开元素...
Vue · @click点击事件：阻止事件冒泡、取消默认事件
weixin_42091247的博客
11-29 3806
一般情况下绑定事件方法的： <div class="parent-wrapper" @click="clickWrapper">点这里</div> 阻止事件冒泡方法： <div class="parent-wrapper" @click.stop="clickWrapper">点这里</div> 取消默认事件方法： <div class="parent-wrapper" @click.prevent="clickWrapper">点这里<
vue 阻止事件冒泡常用的方法
花生日记
05-30 2万+
在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。2. event.stopPropagation()：在方法中使用，阻止事件冒泡。1. @click.stop：在模板中使用，阻止点击事件冒泡。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值