点击时监听键盘事件,比如ctril多选

一个打工仔的笔记

已于 2023-05-09 17:19:10 修改

阅读量900

点赞数

分类专栏： js vue 文章标签： js

于 2021-12-13 10:35:26 首次发布

本文链接：https://blog.csdn.net/Web_Notes/article/details/121900003

版权

js 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

vue

27 篇文章 0 订阅

订阅专栏

判断键盘事件

      function getEventHelperKey(event, ctrlKey, shiftKey) {
        if (!event) return false
        return event.ctrlKey === !!ctrlKey && event.shiftKey === !!shiftKey
      }

比如点击时，有按下ctrl键，就可以多选

//html
<div @click='checkFun'>点击</div>
//js
checkFun(){
  let mouseEvent = window.event
  function getEventHelperKey(event, ctrlKey, shiftKey) {
        if (!event) return false
        return event.ctrlKey === !!ctrlKey && event.shiftKey === !!shiftKey
      }
		if (getEventHelperKey(mouseEvent, true, false)) {//传对应true或者false
        //操作
      } 
}

逻辑：
例如点击的是shift

    //如果点击的是shift，getEventHelperKey（）返回的就是false，继续往下走
      if (getEventHelperKey(mouseEvent, true, false)) {
        conosle.log('ctrlKey') //getEventHelperKey()
      } else if (getEventHelperKey(mouseEvent, false, true)) {
      //这里返回的就是true，所以就会进入到这个方法里面
         conosle.log('shiftKey')
      } else if (getEventHelperKey(mouseEvent, false, false)) {
        conosle.log('nomal')
      }