vue-@click.prevent.self和@click.self.prevent区别

最新推荐文章于 2024-04-26 10:20:41 发布
最新推荐文章于 2024-04-26 10:20:41 发布
阅读量406 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/zhangdq/blog/1618718
版权

具体可以查看这个问题：https://www.oschina.net/question/1785591_2273843

官方解释：

用@click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

个人感觉需要用到这种方式的场景，应该是JS事件冒泡中。

转载于:https://my.oschina.net/zhangdq/blog/1618718

chongbi8297
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
理解vue事件符中v-on:click.prevent.self和v-on:click.self.prevent
木木木华的博客
08-27 3595
v-on:click.self.prevent 可简写为：@click.self.prevent，只会阻止对元素自身的点击？ v-on:click.prevent.self 可简写为：@click.prevent.self，会阻止所有的点击？ 给a链接监听事件加@click.self.prevent 样式：父子关系为：div.grandfather（黄）>div.father（绿）>a链接>div.son（蓝） 1. 点击a链接，输出handleCatch()方法里..
vue函数@click.prevent使用纪要
大雷
03-22 2万+
背景：vue项目操作中遇到@click.prevent函数，场景特殊（项目中有一个自己封装的组件库，因此所有的样式都统一集成，遇到特殊情况想引入特殊UI风格处理时，部分组件需要样式重调，因此用到@click.prevent）特此纪要。 问题：@click.prevent的作用是什么？ 说明：@click.prevent属于vue的内置函数，vue中有很多其他的函数也有很丰富的应用场景，此篇博文思虑再三，仅对@click.prevent进行阐述，有关其他的函数了解，可自行查阅相关资料。 解决： @c.
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实战（07）Vue中的@click.stop和@click.prevent
綦枫Maple的博客
05-06 5268
@click.stop：阻止事件冒泡，即阻止点击事件从子组件向父组件传播
vue中@click.prevent函数的使用
最新发布
qq_42476938的博客
04-26 506
有些标签属性自带了事件，但我们有时并不需要那些事件，因此就需要阻止默认事件，只执行我们绑定的事件。@click.prevent就可以帮我们实现这个效果。
vue中button中vue事件处理：@click.prevent.self和@click.self.prevent区别
weixin_43328237的博客
04-18 3306
看到这个@click.native.prevent有点懵逼， 然后查了点资料，还是零零散散的资料。。自己总结一下 1.在封装好的组件上使用，所以要加上.native才能click 2.prevent就相当于…event.preventDefault() 所以@submit.native.prevent是用来阻止默认行为的 ; ...
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...
js-@click.stop与@click.prevent
2301_76671906的博客
09-26 688
@click.stop与@click.prevent阻止事件冒泡执行
@click.prevent.native作用
qq_52915594的博客
06-10 1073
@click.prevent.native作用 vue语法
vue事件修饰符：通过@click.prevent 阻止事件的默认行为
学亮编程手记
12-17 820
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style&gt
Vue .sync修饰符、@click.stop与@click.prevent
长不大的大灰狼
03-08 1236
Vue .sync修饰符一、.sync修饰符二、@click.stop与@click.prevent 一、.sync修饰符 <comp :foo.sync="bar"></comp> 等价于 <comp :foo="bar" @update:foo="val => bar = val"></comp> 当子组件需要更新 foo 的值时，需要显式地触发一个更新事件： this.$emit('update:foo', newValue) 示例： <
vue @cliick.stop @click.prevent @click.self
萌新的博客
09-20 1369
DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。事件捕获的是从document到触发事件的那个节点，即自上而下得去触发事件。相反的，事件冒泡是自下而上的去触发事件。的点击方法只有自己可以触发，子节点点击之后无法触发；阻止了链接标签默认跳转事件，而执行我们自定义的点击。会阻止元素及其子元素的所有点击事件的默认行为，而。的点击方法 子节点点击之后，也会因为冒泡而触发。的作用是阻止子节点触发事件时通知它的祖先元素。则只会阻止对元素本身的点击事件的默认行为。功能：阻止事件的默认行为。的点击事件不会触发。
vue 阻止事件冒泡和捕获
学习 记录 总结 分享
05-10 4888
阻止事件冒泡: 阻止事件默认行为: 事件只作用在元素本身，而不是其子元素要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法。
vue中.prevent.self 和.self.prevent修饰符
qq_45797421的博客
03-11 1318
一段代码教你识别.prevent.self 和 .self.prevent组合修饰符的区别
Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）
热门推荐
wangchaohpu的博客
11-27 16万+
1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）   v-on:click="fun"   @click="fun"   @click="fun(参数)" &lt;button @click="test1"&gt;test1&lt;/button&gt;   &lt;button @click="test2('abc')"&
Vue鼠标点击事件和键盘事件
weixin_57663206的博客
02-19 5908
Vue鼠标点击事件和键盘事件
Vue - @click.prevent
A_bad_horse的专栏
02-23 412
.prevent: 调用event.preventDefault() <body> <div id = "app"> <form action="test"> <input type="submit" value="提交" @click.prevent="submitClick"> </form> </div> <script src="../vue.js"></script&gt
@click.prevent阻止事件的默认行为
qq_32184753的博客
07-10 1945
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> <form action="/xxx" @submit.prevent="test5"> <input type="submit" value="注册"> </form> 第一个 阻止a标签跳转，仅执行函数test4 第二个 阻止表单提交，仅执行函数test5 ...
Vue事件修饰符，.capture @click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
以爱护甲,爱满枫林。
10-21 1037
.prevent 用于阻止默认事件，点击a标签href可以打开相应的链接，那么给事件加 上此关键字，click.prevent .capture 冒泡顺序 例如 div1中嵌套div2中嵌套div3 <div id="app" v-on:click="show"> 1 <div id="app2" v-on:click.capture="show2"> 2 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值