JS监听组合按键思路及实现过程


Posted in Javascript onApril 17, 2020

前言

我们经常用到组合键,例如alt+f4,crtl+enter。在开发中也会有这种需求。

组合键类型

单独组合,二键组合,三键组合

思路

1、获取键盘上的按键

2、阻止浏览器上的默认行为

3、执行自定义的js函数

代码例子

document.onkeydown = function(e) {
      var keyCode = e.keyCode || e.which || e.charCode;
      var altKey = e.altKey ;
      if(altKey && keyCode == 112) {
        alert("组合键成功")
      }
      e.preventDefault();
      return false;
    }

解刨

e.keyCode || e.which || e.charCode

谷歌浏览器对event.keyCode,event.charCode和event.which都兼容。

火狐浏览器对event.keyCode部分键值有效,如上下左右键(37,38,39,40),enter键(13),PgUp(33),PgDn(34)等部分有效,对数字键,字母键无效。

event.which也是部分键值有效,如字母键,数字键,enter键,Backspace键等有效,对上下左右键,PgUp(33),PgDn(34)键无效。

event.charCode也是对部分键值有效,如字母键,数字键,,Backspace键等有效,对enter键,上下左右键,PgUp(33),PgDn(34)键无效。

ie浏览器中,IE8及以下浏览器对event.charCode无效,event.keyCode和event.which对大部分键值能获得,但是有少部分也不能获得。

所以该写法为兼容写法。

e.altKey,e.shiftKey,e.ctrlKey,e.metaKey

用来监听键盘上的alt,shift,ctrl,meta键。当按下这些键的时候,值会变为true。

e.preventDefault()

阻止默认事件,在W3C标准和IE下,处理方式不太一致。分别是执行e.preventDefault()方法和将e.returnValue = false属性。当然如果你使用的jquery等类库的话,只需要写一个e.preventDefault()就可以了,它帮你做到了兼容。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
javascript canvas检测小球碰撞
Apr 17 #Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
You might like
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
Smarty模板变量调节器用法分析
2016/05/23 PHP
比较完整的微信开发php代码
2016/08/02 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
wxPython实现绘图小例子
2019/11/19 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
喷漆工的岗位职责
2014/03/17 职场文书
优秀毕业生求职信
2014/06/05 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
初中政教处工作总结
2015/08/12 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
导游词之昭君岛
2020/01/17 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Elasticsearch 批量操作
2022/04/19 Python