vue键盘和鼠标事件

长影缚苍龙

已于 2023-08-09 16:58:40 修改

阅读量992

点赞数

文章标签： vue.js 计算机外设前端

于 2023-08-09 16:57:44 首次发布

本文链接：https://blog.csdn.net/qq_36521981/article/details/132191863

版权

1、键盘事件

 **按Enter键**
@keyup.enter

**按PageDown键**
@keyup.page-down 

**按Tab键**
@keyup.tab 

**按Delete键**
@keyup.delete 

**按ESC键**
@keyup.esc

**按Space键**
@keyup.space 

**按↑（Up）键**
@keyup.up

**按↓（Down）键**
@keyup.down 

**按←（Left）键**
@keyup.left 

**按→（Right）键>**
@keyup.right ：

实例： 按enter键执行函数
<div @keyup.enter="enterHandler"></div> 
enterHandler(){
 console.log('你按下了enter键')
}

2、组合按键

**同时按下Alt + Enter按键**
@keyup.alt.enter

3、鼠标事件

**光标进入**
 @mouseenter
 
 **光标在之上**
@mouseover 

**光标在之上移动**
@mousemove

**鼠标移出**
@mouseout

**鼠标离开**
@mouseleave 

**单击左键**
@click

**按下鼠标左键/右键**
@mousedown

**松开鼠标左键/右键**
@mouseup

**双击左键**
@dblclick

可以下列方法判断按下鼠标哪个键

<div  @mousedown="mouseHandle"></div>
mouseHandle(event){
      if(event.button==0){
        console.log('鼠标左键'); 
        
      }else if(event.button==1){
        console.log('鼠标滚轮');
        
      }else{
        console.log('鼠标右键');
      }
    }