目录
e.stopPropagation()、.stop、.self
v-on介绍
详见上一章节：探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示-CSDN博客
v-on事件修饰符
e.stopPropagation()、.stop、.self
capture
e.preventDefault()、.prevent
.once
.passive
详见上一章节：探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示-CSDN博客
鼠标按键修饰符
鼠标按键修饰符主要用于监听特定鼠标按键与元素交互时的事件。
.left：表示鼠标左键修饰符。通常用于监听鼠标左键点击事件。
.right：表示鼠标右键修饰符。用于监听鼠标右键点击事件。
.middle：表示鼠标中键（如果有）修饰符。用于特定情况下对鼠标中键操作的监听。
通过使用这些修饰符，可以更精确地处理不同鼠标按键触发的行为，实现更细致的交互效果。
示例代码如下：
<!-- view部分 -->
<div id="app">
<el-divider content-position="left">left、right、middle鼠标按键修饰符</el-divider>
<el-row>
<el-col :span="24">
<button @click.left="btn" class="btn">按钮一</button>
<button @click.middle="btn" class="btn">按钮二</button>
<button @click.right="btn" class="btn">按钮三</button>
</el-col>
</el-row>
</div>
<!-- js部分 -->
<script>
const {createApp}=Vue;
const app=createApp({
methods:{
btn(){
console.log('button');
}
}
})
app.use(ElementPlus);
app.mount('#app');
</script>运行结果，截图所示：
分析：
鼠标左键单击按钮一控制台输出：“button”，
鼠标中键单击按钮一控制台输出：“button”，
鼠标右键单击按钮一控制台输出：“button”，
按键修饰符
| 键别名 | 描述 |
| .enter | 捕获“回车”键 |
| .tab | 捕获“tab”键 |
| .delete | 捕获“删除”和“退格”键 |
| .esc | 捕获“退出”键 |
| .space | 捕获“空格”键 |
| .up | 捕获“上”键 |
| .down | 捕获“下”键 |
| .left | 捕获“左”键 |
| .right | 捕获“右”键 |
示例代码如下：
<!-- view部分 -->
<div id="app">
<el-divider content-position="left">键盘事件KeyboardEvent</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup="getKey"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作enter键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.enter="enterFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作tab健</el-divider>
<el-row>
<el-col :span="24">
<el-input type="text" @keydown.tab="tabFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作delete和backspace键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.delete="deleteFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作esc键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.esc="escFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作space键（空格键）</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.space="spaceFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作up键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.up="upFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作down键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.down="downFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作left键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.left="leftFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作right键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.right="rightFun"></el-input>
</el-col>
</el-row>
</div>
<!-- js部分 -->
<script>
const {createApp}=Vue;
const app=createApp({
methods:{
getKey(e){
//操作的键
console.log(e.key)
//操作的键的keyCode值
console.log(e.keyCode)
},
enterFun(){
console.log('enter')
},
tabFun(){
console.log('tab')
},
deleteFun(){
console.log('delete')
},
escFun(){
console.log('esc')
},
spaceFun(){
console.log('space')
},
upFun(){
console.log('up')
},
downFun(){
console.log('down')
},
leftFun(){
console.log('left')
},
rightFun(){
console.log('right')
}
}
})
app.use(ElementPlus);
app.mount('#app');
</script>
分析：
按下键盘A，控制台输出“a”，“65”
按下键盘enter键，控制台输出“enter”
按下键盘delete键或backspace键，控制台输出“delete”
按下键盘esc键，控制台输出“esc”
按下键盘space键，控制台输出“space”
按下键盘up键，控制台输出“up”
按下键盘down键，控制台输出“down”
按下键盘left键，控制台输出“left”
按下键盘right键，控制台输出“right”
系统修饰符
.ctrl：捕获“Ctrl” 键。
.alt：捕获“Alt” 键。
.shift：捕获“Shift”键。
.meta：在 Mac 系统键盘上，meta对应 Command 键(⌘)；在 Windows 系统键盘上，meta对应 Windows 徽标键(⊞)；在 Sun 操作系统键盘上，meta对应实心宝石键(◆)；在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta被标记为“META”；在 Symbolics 键盘上，meta被标记为“META”或者“Meta”。
.exact：用于精确控制组合按键事件的触发。它可以确保只有在同时按下指定的修饰键和其他按键时，才会触发相应的事件。例如，@click.ctrl.exact="handleClick"表示只有在同时按下 Ctrl 键和鼠标左键时，才会触发handleClick方法。
示例代码如下：
<!-- view部分 -->
<div id="app">
<el-divider content-position="left">操作ctrl键</el-divider>
<el-row>
<el-col :span="24">
<!-- ctrl+点击 -->
<el-input @click.ctrl="ctrlFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作alt+enter键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keyup.alt.enter="altFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作shift键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keydown.shift="shiftFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">操作meta键</el-divider>
<el-row>
<el-col :span="24">
<el-input @keydown.meta="metaFun"></el-input>
</el-col>
</el-row>
<el-divider content-position="left">.exact修饰符</el-divider>
<el-row>
<el-col :span="24">
<!-- 仅当没有按下任何系统按键时触发 -->
<el-input @click.exact="exactFun"></el-input>
</el-col>
</el-row>
</div>
<!-- js部分 -->
<script>
const {createApp}=Vue;
const app=createApp({
methods:{
ctrlFun(){
console.log('ctrl');
},
altFun(){
console.log('alt+enter');
},
shiftFun(){
console.log('shift');
},
metaFun(){
console.log('meta');
},
exactFun(){
console.log('exact');
}
}
})
app.use(ElementPlus);
app.mount('#app');
</script> 分析：
按下键盘ctrl键并单击鼠标，控制台输出“ctrl”。
同时按下键盘alt+enter键，或先按住键盘alt键不放在按住enter键，控制台输出“alt+enter"。
按下键盘shift键，控制台输出“shift”。
按下键盘meta键，控制台输出“meta”。
单击鼠标，控制台输出“exact”。
扫一扫
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
