Vue事件修饰符和按键修饰符用法总结

最新推荐文章于 2022-08-28 19:25:38 发布
原创 最新推荐文章于 2022-08-28 19:25:38 发布 · 645 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文详细介绍了Vue.js中常用的事件修饰符，包括`stop`、`prevent`、`capture`、`self`、`once`和`passive`，以及按键修饰符如`enter`、`tab`、`delete`等，还有鼠标修饰符`right`、`left`和`middle`。这些修饰符帮助开发者更精确地控制事件处理，提升用户体验。

今天给大家介绍Vue的事件修饰符、按键修饰符 、 鼠标修饰符！

事件修饰符

stop 阻止事件继续传播

   <div @click.stop="handleClick">hello word</div>

prevent 阻止标签默认行为

   <div @click.prevent="handleClick">hello word</div>

capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

   <div @click.capture="handleClick">hello word</div>

self 只当在 event.target 是当前元素自身时触发处理函数

   <div @click.self="handleClick">hello word</div>

once 事件将只会触发一次

   <div @click.once="handleClick">hello word</div>

passive 告诉浏览器你不想阻止事件的默认行为

   <div @click.passive="handleClick">hello word</div>

按键修饰符

enter 回车键触发

   <input @keydown.passive="handleClick">hello word</input>

tab tab键触发

  <input @keydown.tab="handleClick">hello word</input>

delete 删除键触发

   <input @keydown.delete="handleClick">hello word</input>

esc 返回键触发

   <input @keydown.esc="handleClick">hello word</input>

up 上键触发

  <input @keydown.up="handleClick">hello word</input>

down 下键触发

  <input @keydown.down="handleClick">hello word</input>

left 左键触发

  <input @keydown.left="handleClick">hello word</input>

right 右键触发

  <input @keydown.right="handleClick">hello word</input>

鼠标修饰符

right 鼠标右键触发

  <div @keydown.right="handleClick">hello word</div>

left 鼠标左键触发

  <div @keydown.left="handleClick">hello word</div>

middle 中间键触发

  <div @keydown.middle="handleClick">hello word</div>
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .prevent .capture .self .once <div @click='doThis' style="widt
Vue 按键修饰符处理事件的方法
08-27
Vue 按键修饰符处理事件的方法 Vue 按键修饰符是 Vue 框架中的一种特殊处理事件的方法，它允许开发者轻松地处理键盘事件，无需关心 keyCode 的值。 Vue 按键修饰符主要分为两大类：按键别名和系统修饰键。 按键...
前端开发之Vue事件修饰符和按键修饰符
m0_58371965的博客
01-17 910
前言 在前端开发Vue.js中，关于事件和按键的使用也是比较常见的操作之一，那么与它们相关的事件修饰符和按键修饰符也是延伸前端培训的比较常用的操作。那么本篇博文就来分享一下关于Vue.js中事件修饰符和按键修饰符的使用。 一、事件修饰符 在Vue.js的事件处理程序中使用v-指令中的v-on指令，是用来进行事件绑定的，也可用@来代替。Vue.js也为v-on指令提供了对应的一些事件修饰符，主要是通过由点”.”表示的指令后缀，来调用修饰符。v-on指令常用的修饰符如下所示： .stop — 调用 ev
vue里的事件修饰符和按键修饰符
Amanda_wmy的博客
04-10 2086
vue里的事件修饰符和按键修饰符 vue事件修饰符： 包括： .stop ：阻止事件冒泡 .prevent ：阻止默认事件，提交事件不再重载页面 .capture ：添加事件侦听器时使用事件捕获模式 （若有多个该修饰符的元素则由外而内触发） .self ：当事件在该元素本身（而不是子元素）触发时触发回调(即直接作用在该元素上的事件才可以执行) .once ：事件只能触发一次 ...
Vue中的事件修饰符，按键修饰符
叶卡捷琳堡的博客
07-13 434
文章目录修饰符1.事件修饰符2.按键修饰符 修饰符 1.事件修饰符 vue中提供的事件修饰符一共有4种 .stop：用来阻止事件冒泡（防止事件向父标签传递） .prevent：用来阻止标签的默认行为 .self：只监听自身标签触发的事件 .once：该事件只触发一次 语法： @事件名.事件修饰符=“事件处理函数” 例：@click.stop=“test”，给click加了一个stop修饰的事件 具体代码内容 <!DOCTYPE html> <html> <head>
vue 事件修饰符与按键修饰符
weixin_44371237的博客
12-25 521
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的 需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑， 而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了 事件修饰符。修饰符是由 点开头的指令后缀来 表示的。  .stop ：阻止事件冒泡到父元素  .prevent：阻止默认事件发生  .capture：使用事件捕获模式  .self：只有元素自身触发事
Vue事件修饰符native、self示例详解
10-16
在Vue.js中，事件修饰符是用于处理DOM事件的指令后缀，它们允许我们在父组件中对子组件的事件进行监听时添加额外的行为控制。这篇文章重点介绍了两个特定的事件修饰符：native和self。下面将详细介绍这两个修饰符的...
《2.3、事件处理》本文详细介绍了Vue.js中事件处理的核心语法、事件修饰符和按键修饰符的使用方法
最新发布
03-01
此外，Vue还提供了事件修饰符和按键修饰符，以便更精细地控制事件行为。 事件修饰符： - `.prevent`：可以阻止事件的默认行为，比如阻止链接的跳转。 - `.stop`：阻止事件继续传播，即阻止事件冒泡。 - `.once`：...
事件修饰符与按键修饰符
weixin_42101753的博客
05-14 206
<!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-Compatible" content="ie=edge" /> <titl
v-on事件修饰符及按键修饰符
sleepwalker_1992的专栏
09-29 4790
v-on 事件修饰符 常用的事件修饰符有： .stop  阻止事件冒泡 .self  当事件在该元素本身触发时才触发事件 .capture 添加事件侦听器是，使用事件捕获模式 .prevent  阻止默认事件 .once 事件只触发一次 什么是事件冒泡 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
day2-事件修饰符和按键修饰符
reaaal的博客
07-15 189
事件参数对象的传递 事件参数对象：event 阻止事件冒泡：e.stopPropagation（） 取消默认事件：e.preventDefault（） 在vue中进行传递要通过$event 形式。如下： **<body> <div id="app"> <h4>事件监听</h4> <button @click="showMessage('SUGA',$event)">按钮1</button> </div&
v-on的事件修饰符与按键修饰符
Q2159621453的博客
05-24 237
一、事件修饰符 1.阻止冒泡(重要) .stop <div id="app"> <div @click = "father"> father <div @click.stop = "son">son</div> </div> </div> <script> const vm = new Vue({
Vue事件修饰符 | | 按键修饰符 | | 表单修饰符
pspxuan的博客
10-07 278
事件修饰符，顾名思义就是处理事件的修饰符 1.修饰符预览 .stop //阻止事件冒泡 .prevent //组止默认时事件（例如a标签的默认跳转） .capture //监听元素并优先触发在该元素上的事件（当元素发生冒泡时，谁有该事件修饰符，就先触发谁。 先看没有该修饰符的操作） .self //只有点击当前元素时候，才会触发事件处理函数,该元素的事件不会因为冒泡而触发。 ....
vue 事件修饰符 & 按键修饰符
Jana Jing的分享
12-02 1725
事件修饰符 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。 .stop 阻止单击事件传播 即阻止了事件冒泡，相当于调用了event.stopPropagation方法（通俗讲就是阻止事件向上级DOM元素传递） <div @click="show(1)"> <div @click="show(2)">测试</div> </div> 点击“测试”输出 ...
学习笔记之Vue事件修饰符的使用
qq_38118222的博客
08-12 323
事件修饰符 1.修饰符 修饰符 作用 stop 阻止事件冒泡 prevent 阻止默认事件的发生 capture 被此修饰符修饰的事件先触发 self 只有点击被修饰的元素 才触发事件处理函数 once 只触发一次事件 2. 举例说明 1. stop 阻止事件向上冒泡。下图是未添加.stop，点击button触发事件。先触发了btn事件，然后触发了div事件。 当给btn click添加.stop修饰符以后，可以阻止事件向上冒泡。 只触发了btn事件，阻止了向上冒泡 2
Vue基础：Vue事件修饰符的使用
zmt0104的博客
08-09 502
Vue事件修饰符的使用
3.Vue—绑定事件、事件修饰符、键盘事件（详细）
weixin_51351637的博客
08-28 3112
我们单击按钮的时候，通常情况下不论我们点击几次，都会出现弹框，但是当我们加了@click.once之后，这个按钮只能单击一次，第二次及其以后不再出现弹窗。当我们添加.self的，我们再点击按钮，只会出现一个，那就是按钮所绑定的函数运行，上面那个div便不会再运行（这个.self也可以说变相的阻止了冒泡）但是我们添加了@click.capture之后，我们会发现当我们在捕获box1的时候，也完成了box1的冒泡，最终控制台上的输出内容是先1再2。否则this就不是vm了。右 right。...
v-on事件绑定与修饰符
m0_64026548的博客
05-11 368
v-on事件绑定 事件处理 — Vue.jshttps://cn.vuejs.org/v2/guide/events.html在Vue中可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on:指令可以使用简写方式用@来替代 v-on可以绑定的事件参考：事件参考 | MDN <div id="app"> <h1>{{message}}</h1> <!-- 原生--> <...
02-Vue按键修饰符,自定义指令
乐百寿
08-27 742
Vue键盘事件，自定义指令
vue 事件修饰符&按键修饰符
04-02
Vue事件修饰符是用来改变事件的行为的特殊标记。它们以点号(".")开头，紧跟着是修饰符的名称。Vue提供了以下事件修饰符： 1. .stop：阻止事件冒泡； 2. .prevent：阻止默认行为； 3. .capture：使用事件捕获模式； 4. .self：只当事件在该元素本身（而不是子元素）触发时触发回调； 5. .once：只触发一次； 6. .passive：告诉浏览器该事件处理程序不会调用preventDefault()。 例如： ``` <button @click.stop="doSomething"></button> ``` 在这个例子中，当点击按钮时，事件不会冒泡到父元素。 ``` <a href="#" @click.prevent="doSomething"></a> ``` 在这个例子中，当点击链接时，页面不会跳转到指定链接，因为事件被阻止了默认行为。 ``` <div @click.capture="doSomething"></div> ``` 在这个例子中，使用事件捕获模式，事件从最外层元素开始向内传递。 ``` <div @click.self="doSomething"></div> ``` 在这个例子中，只有当点击div元素本身时，事件才会触发回调函数。 ``` <button @click.once="doSomething"></button> ``` 在这个例子中，事件只会触发一次。 ``` <div @touchstart.passive="doSomething"></div> ``` 在这个例子中，告诉浏览器该事件处理程序不会调用preventDefault()，可以提高页面的滚动性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值