js-@click.stop与@click.prevent

已于 2024-02-18 10:48:39 修改
阅读量828 收藏 1
点赞数 1
分类专栏： js 文章标签： javascript 开发语言 html 前端
于 2023-09-26 23:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76671906/article/details/133321748
版权

1.@click.stop-阻止事件冒泡执行

简单的就是说，一个父节点A,包含的子节点B;A与B都绑定对应的事件a与b。在B节点绑定对应的事件@click.stop(b)。只执行b方法。

如果使用@click(b)会冒泡执行@click(a)方法

使用场景

如果只需要点击子元素执行对应的方法，实际会先触发子元素的方法 ，再执行父元素的方法；

可以使用@click.stop(阻止点击事件的传播)

2. click.prevent-阻止事件的默认行为

使用场景

阻止事件的默认行为，阻止触发dom的原始事件，执行click.prevent(c)执行自定义的事件c

vue click.stop阻止点击事件继续传播的方法
10-18
此外，Vue.js还提供其他事件修饰符，例如`click.prevent`用来阻止事件的默认行为（如表单提交），`click.once`只让事件处理函数执行一次，以及`click.capture`使得事件处理函数在事件冒泡阶段之前执行。这些修饰符...
Vue中@click.stop与@click.prevent
热门推荐
weixin_42260975的博客
03-12 3万+
Vue中@click.stop与@click.prevent 一、@click.stop 问题：父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件： <view class="footer-box" @click="clickCard"> <view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</
Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
孙悟空
06-30 1万+
最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。
【Vue】Vue扫盲（一）事件标签、事件修饰符：@click.prevent @click.stop @click.stop.prevent、按键修饰符、及常用指令
最新发布
qq_39666711的博客
10-10 983
 指令 (Directives) 是带有。
@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)
qq_32184753的博客
07-10 2万+
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", dat
Vue实战（07）Vue中的@click.stop和@click.prevent
綦枫Maple的博客
05-06 5734
@click.stop：阻止事件冒泡，即阻止点击事件从子组件向父组件传播
vue函数@click.prevent使用纪要
大雷
03-22 2万+
背景：vue项目操作中遇到@click.prevent函数，场景特殊（项目中有一个自己封装的组件库，因此所有的样式都统一集成，遇到特殊情况想引入特殊UI风格处理时，部分组件需要样式重调，因此用到@click.prevent）特此纪要。 问题：@click.prevent的作用是什么？ 说明：@click.prevent属于vue的内置函数，vue中有很多其他的函数也有很丰富的应用场景，此篇博文思虑再三，仅对@click.prevent进行阐述，有关其他的函数了解，可自行查阅相关资料。 解决： @c.
详解vue.js的事件处理器v-on:click
10-19
Vue.js 是一个流行的前端JavaScript框架，它简化了构建交互式用户界面的过程。在Vue中，事件处理是一个核心功能，允许开发者响应用户的行为。本文将深入探讨Vue.js的事件处理器`v-on:click`，它是如何工作的，以及...
《vue应用程序开发-Vue.js内置指令》.pptx
05-13
<a v-on:click.stop.prevent="doThat"> ``` ### 小结 通过以上介绍，我们了解了 Vue.js 中几种常用的基本指令及其应用场景。这些指令能够帮助开发者更高效地管理和操作 DOM，同时提升用户体验。理解并熟练掌握...
解决vue的touchStart事件及click事件冲突问题
10-15
在Vue中，可以通过@touchstart修饰符直接在模板中实现这一方法，例如使用@touchstart.stop.prevent="handleTouchStart"。在方法中handleTouchStart内不需要再次调用e.preventDefault()，因为模板中的修饰符已经帮...
vue的学习代码-vue的指令部分 如 vue-if、vue-for、vue-model、vue-bind...
05-12
Vue.js 是一款流行的前端JavaScript框架，它通过声明式的数据绑定和组件化能力，极大地简化了网页和应用的开发。在“vue的学习代码-vue的指令部分”中，我们将深入探讨Vue的一些核心指令，如`v-if`、`v-text`、`v-...
vue @click的stop和prevent
SunshineGGB的博客
07-28 3806
@click.stop 阻止事件冒泡 @click.prevent 阻止事件的默认行为 联合饿了吗UI使用的时候，el-table(主表)包含一个或多个子表时(el-tabs)，点击右侧的编辑、删除时会同时触发el-table的current-change()，如果子表过多会，每次点击编辑/删除都会多次同时调用子表的数据查询接口，此时在编辑和删除的click事件加上 @click.stop.prevent会避免多次调用子表的查询接口(如下) 注：本人是在点击删除时根据tabs的一个或多个字表提示
vue 中click.stop的用法
小范先生上行中的博客
01-29 1万+
click.stop 阻止点击事件继续传播 场景： 在table中使用，点击当前行，当前行被勾选，但是点击当前行中按钮或点击事件时，使用此方法，则在触发当前点击事件后，阻止行的选中事件 使用： html <el-table ref="tableRef" :data="tableData" :row-key="row => { return row.id}" @selection-change="handleSelectionChange...
@click.stop的作用
逆风优雅的博客
03-21 2403
@click.stop表示阻止事件向外传播（即: 阻止事件冒泡） 代码演示 <template> <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止点击事件继续向外传播</button> </div> </div> </template> <script> ex
Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）
我是一只蘑菇17的博客
11-26 3541
1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）   v-on:click="fun"   @click="fun"   @click="fun(参数)" <button @click="test1">test1</button>  <button @click="test2('abc')">test2&...
Vue的@click、@click.prevent、@click.stop
程邓楠的博客
07-11 1万+
1、@click，绑定监听（单击事件） v-on:click="function" @click="function" @click="function(params)" <button id="test1" @click="test1">test1</button> <!-- params：参数 --> <button id="test2" @click="test2('parpams')">test...
vue中@click.prevent函数的使用
qq_42476938的博客
04-26 680
有些标签属性自带了事件，但我们有时并不需要那些事件，因此就需要阻止默认事件，只执行我们绑定的事件。@click.prevent就可以帮我们实现这个效果。
vue @click.stop阻止冒泡事件的发生
weixin_45815557的博客
11-24 532
@click.stop阻止事件的冒泡事件
事件修饰符@click.stop,@click.prevent&css样式穿透 pointer-events: none
m0_37751401的博客
12-15 965
事件冒泡，事件捕获，事件穿透
@click.prevent 和 @click.stop
10-25
@click.prevent和@click.stop都是Vue.js中的事件修饰符，它们的功能都是阻止事件的默认行为。但是它们的区别在于，@click.prevent会阻止事件的默认行为并且阻止事件的传播，而@click.stop只会阻止事件的传播。举个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值