Vue中@click.stop与@click.prevent

最新推荐文章于 2024-05-09 12:10:41 发布
最新推荐文章于 2024-05-09 12:10:41 发布
阅读量3.1w 收藏 74
点赞数 23
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42260975/article/details/114691422
版权

Vue中@click.stop与@click.prevent

一、@click.stop

问题：父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件：

<view class="footer-box" @click="clickCard">
		<view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
		<view @click="footerClick('评论')"><text class="footer-box__item">评论</text></view>
		<view @click="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

此时，我们就需要使用@click.stop：阻止事件冒泡方法来解决这个问题：

<view class="footer-box" @click="clickCard">
		<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
		<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
		<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

二、@click.prevent

还有一个与之相似的方法：@click.prevent：阻止事件的默认行为，例如：在代码里写入一个a标签，点击会跳转到目标链接网页中：

<view class="example-body">
	<a href="http://www.baidu.com">百度</a>
</view>

但如果我们不想让它跳转但还想使用a标签的话，此时就需要使用@click.prevent方法：

<view class="example-body">
	<a href="http://www.baidu.com" @click.prevent='notLink'>百度</a>
</view>

这时再点击a标签的时候就不会跳转目标地址链接了。

幸福了，然后呢
关注
  • 23
    点赞
  • 踩
  • 74
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。 而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。 此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop=’xx()’ .stop .prevent .capture .self .once <a></a> <!
详解vue.js的事件处理器v-on:click
10-19
本文将深入探讨Vue.js的事件处理器`v-on:click`，它是如何工作的，以及如何在实际项目中有效利用。 ### 1. `v-on`指令 `v-on`是Vue中的一个指令，用于监听DOM事件。它允许你将Vue实例的方法绑定到特定的DOM元素上...
Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
孙悟空
06-30 9183
最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。
Vue中@click.stop和@click.prevent实例详解
最新发布
菜鸟教程
05-09 526
到此这篇关于Vue中@click.stop和@click.prevent详解的文章就介绍到这了,更多相关Vue中@click.stop和@click.prevent内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/
js-@click.stop与@click.prevent
2301_76671906的博客
09-26 652
@click.stop与@click.prevent阻止事件冒泡执行
@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 5182
@click.stop：阻止事件冒泡，即阻止点击事件从子组件向父组件传播
vue @click.stop阻止冒泡事件的发生
weixin_45815557的博客
11-24 493
@click.stop阻止事件的冒泡事件
Vue - @click.stop
A_bad_horse的专栏
02-23 609
<body> <div id = "app"> {{message}} <div @click="divClick"> divClick <button @click.stop="btnClick">btn</button> </div> </div> <script src="../vue.js"></script> <script&.
vue——@click的事件命令以及修饰符
chunchun1230的博客
09-29 1万+
1、@click.stop 阻止事件冒泡 //只弹出“noclick” <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", .
vue.js2.chm中文手册下载
11-28
还可以使用`.method`修饰符，如`@click.stop`阻止事件冒泡，`@click.prevent`阻止默认行为。 六、Class与Style绑定 Vue.js允许动态绑定CSS类和内联样式。v-bind:class可以结合对象和数组实现多态的类绑定，v-bind:...
详解vue中this.$emit()的返回值是什么
10-17
在示例代码中，`<button @click.stop="handleClick">重置失败</button>`就使用了`.stop`修饰符，防止点击事件冒泡到父组件的`handleDivClick`方法。 总的来说，`this.$emit()`在Vue中用于触发自定义事件，它本身不...
ppt课件-第4章 Vue事件处理.zip
03-22
Vue还提供了`.prevent`、`.stop`、`.capture`、`.self`、`.once`等修饰符，以实现更复杂的事件处理逻辑。例如，`.prevent`用于阻止元素的默认行为，如表单提交： ```html <form v-on:submit.prevent="onSubmit"> <!...
vue @cliick.stop @click.prevent @click.self
萌新的博客
09-20 1353
DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。事件捕获的是从document到触发事件的那个节点，即自上而下得去触发事件。相反的，事件冒泡是自下而上的去触发事件。的点击方法只有自己可以触发，子节点点击之后无法触发；阻止了链接标签默认跳转事件，而执行我们自定义的点击。会阻止元素及其子元素的所有点击事件的默认行为，而。的点击方法 子节点点击之后，也会因为冒泡而触发。的作用是阻止子节点触发事件时通知它的祖先元素。则只会阻止对元素本身的点击事件的默认行为。功能：阻止事件的默认行为。的点击事件不会触发。
@click.prevent阻止事件的默认行为
qq_32184753的博客
07-10 1942
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> <form action="/xxx" @submit.prevent="test5"> <input type="submit" value="注册"> </form> 第一个 阻止a标签跳转，仅执行函数test4 第二个 阻止表单提交，仅执行函数test5 ...
导致View的OnClick事件无效或者失灵的原因
Geek Nero
07-21 4910
在View的其他同级View中，添加了 android:focusable 这个属性，所以才导致这个原因，切记。
Vue3事件冒泡
油墨香^-^的博客
08-08 3306
事件冒泡是指当一个元素上的事件被触发时，它会向父元素传播，直到到达文档的根节点。在JS中，事件冒泡是默认行为。这意味着，如果你在一个子组件上绑定了一个事件，当该事件被触发时，它会沿着组件树向上冒泡，直到到达根组件。
vue3 事件处理 @click
一步一个脚印，踏实努力，向着目标前进
08-17 9467
在Vue 3中，事件处理可以通过@click指令来实现。@click指令用于监听元素的点击事件，并在触发时执行相应的处理函数。下面是一个简单的示例，展示了如何在Vue 3中处理点击事件：
萌新VueDay3——绑定监听（@click.stop、@click.prevent、@keyup）
weixin_45019566的博客
12-30 522
事件处理 绑定监听 为按钮绑定事件监听 简单分为以下情况： <div id="test"> <button @click="btn1">不带参数函数</button> <button @click="btn2('我是带参数函数')">带参数函数</button> <button @click="btn3"&...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
05-30
好的，我知道你的问题了。首先，Vue中的@click是用来绑定点击事件的指令，它可以在元素被点击时调用相应的方法。而事件修饰符@click.stop和@click.prevent都是用来阻止事件冒泡的，但它们的方式略有不同。 @click.stop会阻止事件冒泡，即停止事件向父元素的传递，但不会阻止元素本身上绑定的其他事件的触发。而@click.prevent则会阻止默认事件的触发，比如在a标签上使用@click.prevent会阻止其默认的跳转行为。 至于按键修饰符@keyup.enter，则是用来监听键盘按键的指令，只有当用户敲击了"Enter"键时，相应的方法才会被调用。 希望能够解答你的疑问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值