首页 > 其他分享 >事件修饰符

事件修饰符

时间:2023-07-05 10:03:07浏览次数:29  
标签:prevent 修饰符 键盘 meta 事件 按键

使用场景:

在一些需要对某些事件进行阻止默认事件或者冒泡等等类似的操作的时候,就需要进行一定的处理,Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀。包含以下这些:

.stop   // 
.prevent // 
.self  // 
.capture  // 捕获
.once   // 
.passive  // 

另外,修饰语可以使用链式书写,如:<a @click.stop.prevent="doThat"></a>
使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。因此使用
@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为,而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

.stop、.prevent和.self

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如:事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应:

<!-- 添加事件监听器时,使用 `capture` 捕获模式 -->
<!-- 例如:指向内部元素的事件,在被内部元素处理前,先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

另外还有按键修饰符

在监听键盘事件时,我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

在监听键盘事件时,我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。如:

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。

.ctrl
.alt
.shift
.meta

注意:

在 Mac 键盘上,meta 是 Command 键 (⌘)。在 Windows 键盘上,meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上,meta 是钻石键 (◆)。在某些键盘上,特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘,如 Knight 键盘,space-cadet 键盘,meta 都被标记为“META”。在 Symbolics 键盘上,meta 也被标识为“META”或“Meta”。

举例来说:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符

.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。如:

<!-- 当按下 Ctrl 时,即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

.left
.right
.middle

标签:prevent,修饰符,键盘,meta,事件,按键
From: https://www.cnblogs.com/axingya/p/17527742.html

相关文章

  • CANoe入门——键盘事件和系统变量事件
    需求:将VT的Channel全部打开和关闭实现方式:1.键盘事件实现,在CANoe工程执行后,通过按键控制VT上Channel的断开和闭合2.系统变量事件实现,创建系统变量与Button关联,设置系统环境变量,通过两个按钮控制断开和连接(按钮关联的系统变量未定义会有默认值,按下按钮也会改变,因此会......
  • 【十四】JavaScript之DOM中的事件操作
    【十四】JavaScript之DOM中的事件操作【1】事件操作所谓的事件(Event),其实就是用户与浏览器之间的一次交互过程或交互行为。例如:用户输入一段内容,用户鼠标晃动一下等等。js中提供了大量的事件操作给开发者,在用户发生事件操作以后,进行反馈,响应。事件类型有很多,但是操......
  • 如何发布符合 .NET 准则的事件
    下面的过程演示了如何将遵循标准.NET模式的事件添加到类和结构中。.NET类库中的所有事件均基于 EventHandler 委托,定义如下:publicdelegatevoidEventHandler(objectsender,EventArgse);尽管定义的类中的事件可基于任何有效委托类型,甚至是返回值的委托,但一般还是建议使用......
  • jQuery 事件对象
    1.1.jQuery事件注册​ jQuery为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下:优点:操作简单,且不用担心事件覆盖等问题。缺点:普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。语法//语法element.事件名称(function()({})//点击事件......
  • JS常见的事件
    onblur元素失去焦点时触发onblur事件会在对象失去焦点时发生。Onblur经常用于Javascript验证代码,一般用于表单输入框。提示:onblur相反事件为onfocus事件。onchange该事件在表单元素的内容改变时触发(<input>,<keygen>,<select>,和<textarea>)onchang......
  • 语法糖(修饰符) - .sync
    关于.sync在了解这个语法糖时,首先我们要了解的是vue组件之间的通信规则是单向数据流即:vue提倡单向数据流,即父级props的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态,使得应用的数据流变得难以理解。如果破坏了单向数据流,当应用复杂时,debug的成本会非......
  • JavaScript 事件的绑定
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> window.onload=function(){ /* *点击按钮以后弹出一个内容 */ //获取按钮......
  • JavaScript 事件的传播
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:300px; height:300px; background-color:yellowgreen; } ......
  • JavaScript 事件的委派
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <scripttype="text/javascript"> window.onload=function(){ varu1=document.getElementById("......
  • 【PHP语言】医院安全(不良)事件报告系统
    技术架构:前后端分离,仓储模式,开发语言:PHP开发工具:vscode前端框架:vue2+element后端框架:laravel8数据库:mysql5.7系统概述:医院安全(不良)事件报告系统是一种用于医院管理和监管的工具,旨在帮助医疗机构识别、跟踪、分析和解决各种医疗安全事件,提高医疗质量和患者安全。医院安全(......