事件修饰符.self的用法。

最新推荐文章于 2024-04-05 13:33:40 发布
最新推荐文章于 2024-04-05 13:33:40 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： vue.js 文章标签： 修饰符 self
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/73741532
版权

###.self可以理解为跳过冒泡事件，即捕获事件在该元素上发生的方法。
通俗的说打个比方：你的事情就是你自己的事情，和你的家庭没有关系。点击你，只能触发你的事件，点击你的家庭只能触发你的家庭的事件。youself、myself、heself、

有一个王小森
关注
专栏目录
vue知识点（v-model修饰符/key属性的作用/v-if与v-show的区别 /v-for与v-if注意事项/父子组件之间传递数据的方法/单页应用spa）
m0_73495603的博客
11-26 686
v-model修饰符/key属性的作用/v-if与v-show的区别 /v-for与v-if注意事项/父子组件之间传递数据的方法/单页应用spa
事件修饰符
weixin_64946194的博客
11-28 634
事件修饰符
vue中的事件修饰符.self、.capture和.passive
时清云的博客
06-29 3958
vue中的事件修饰符有6种： .stop .prevent .capture .once .self .passive .stop是stopPropagation停止冒泡， .prevent是preventDefault阻止默认事件， .once是点击事件将只会触发一次 <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> 1、.self 只在目标Dom是绑定了动作的Dom才触发 也就是说只有这个Dom绑定了这个
vue.js中的事件修饰符.self的用法。
王小森的成长博客
06-28 8013
vue.js中的.self事件修饰符的理解，即用法。
基于vue.js中事件修饰符.self的用法(详解)
11-26
本文将详细探讨Vue.js中事件修饰符`.self`的用法。 事件修饰符是Vue.js中用于修饰事件处理器行为的特殊后缀，它们可以改变事件处理器的默认行为。`.self`修饰符是其中的一种，它的主要作用是限制事件处理函数的触发...
vue事件修饰符和按键修饰符用法总结
12-03
本文将深入探讨Vue中的事件修饰符和按键修饰符。 首先，让我们来看看事件修饰符。事件修饰符是以点`.`开头的指令后缀，用于在事件处理函数中添加额外的行为。以下是一些常见的事件修饰符： 1. `.prevent`：这个...
Vue3官网基础（四）事件处理（v-on、事件修饰符.passive.self.capture）、表单绑定输入 v-model（textarea、checkbox、radio、select、值绑定、修
qq_43456781的博客
09-17 1501
Vue3官网基础（四）事件处理（v-on、事件修饰符.passive.self.capture）、表单绑定输入 v-model（textarea、checkbox、radio、select、值绑定、修饰符 ） 文章目录Vue3官网基础（四）事件处理（v-on、事件修饰符.passive.self.capture）、表单绑定输入 v-model（textarea、checkbox、radio、select、值绑定、修饰符 ）1. 事件处理监听事件事件处理方法内联处理器中的方法多事件处理器事件修饰符按键修饰符按
Vue 事件修饰符.self的用法
正在崛起的博客
07-19 9371
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a250758092/article/details/78354319 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:subm...
Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
最新发布
libingjiedd的博客
04-05 1622
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
20 六种事件修饰符：stop、prevent、capture、self、once和passive解决冒泡事件
wgchen
12-01 5207
[基础]Vue绑定事件详讲-事件修饰符通过修饰符解决冒泡事件stop修饰符self修饰符其它常用修饰符初始页面 绑定事件中的修饰符有很多种，这些修饰符各有各的用处。 本节课将讲解6种Vue中的事件修饰符，分别是； stop、prevent、capture、self、once和passive。 通过修饰符解决冒泡事件 在JavaScript中冒泡事件是最长处理的事件，先写一段代码，手动创造一个冒泡事件。 新建一个文件Demo20.html 修改模板 template 部分，在最外层增加一个 <div&
.sync 修饰符 和 .self 修饰符
xiaoququ的博客
08-10 191
.self 事件修饰符 场景：一个有遮罩的弹窗，点击遮罩关闭弹窗。因为遮罩在弹窗的外层，所以在外层加点击事件时，如何能点击弹窗部分不触发事件呢？ 使用@click.self 可以只有点击自身时才触发点击事件 .sync 修饰符 场景：父组件向子组件传值，子组件有需要改变这个值；例如父组件有一个弹窗子组件，父组件传递show，点击弹窗关闭按钮改变show为false // 子组件 <div> <button @click="close">关闭</button&gt
vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
热门推荐
张兴华的博客
06-20 1万+
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是...
『VUE』10. 事件修饰符（详细图文注释）
MZH
04-04 2280
『VUE』10. 事件修饰符（详细图文注释）
python classmethod_python @classmethod
weixin_39569753的博客
11-28 252
写在前面写博客的时候，我发现拖延症很严重，本来昨天要开始写的，结果东看看，西翻翻，啥也没落实下来。时间过去了，口袋里的收获却寥寥无几。讨厌这样的自己。我要戒掉这个不好的毛病。拖延症的底层原因之一是：不知如何下手拖延症的底层原因之二是：每天都重复，疲了，累了这里仅代表我自己1..什么是classmethodclassmethod是用来指定一个类的方法为类方法长的像下面这个样子class cc:@cl...
vue最常用的事件修饰符和指令(收藏)
潇心的博客
07-23 481
一、事件修饰符 1 .stop 阻止自身的冒泡事件 <div id="app"> <!-- .stop 阻止自身的冒泡事件--> <div @click="divClick"> <button @click.stop="btnClick">点击</button> </div&...
vue事件修饰符.passive
08-22
在Vue中，事件修饰符`.passive`用于告诉浏览器，你不想阻止事件的默认行为。这与普通的`preventDefault`方法不同。`preventDefault`会完全阻止事件的默认行为，而`.passive`只是告诉浏览器你不想阻止默认行为，但并不会主动去阻止它。这在一些特定场景下非常有用，例如滚动事件的监听，当你需要监听滚动事件但不想阻止页面的滚动时，可以使用`.passive`修饰符。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue中的事件修饰符.self、.capture和.passive](https://blog.csdn.net/xiaolinlife/article/details/107013723)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue 事件修饰符 .passive 最通俗的理解](https://blog.csdn.net/chunxiaqiudong5/article/details/126083075)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值