js 按键监听_JS实现监听组合按键

时间: 2018-04-09阅读: 1532标签: js事件

有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制、粘贴等等。下面简单梳理一下思路,我们所熟悉的按键有这么集中类型:

  • 单独的按键操作,如:delete、up、down等
  • 两位组合建,如:ctrl(cmd)+ 其他按键,alt+其他按键,shift+其他按键
  • 三位组合键,如:ctrl(cmd)+ shift + 其他按键,Ctrl(cmd)+ alt + 其他按键

大概只有这么几种情况了,至少我没有见过其他的情况。如果确实存在的话,基本实现的原理也比较类似,本文就不再赘述了。

上面这三种情况, 都要处理的一个关键问题是阻止默认行为:比如删除按键,保存网页按键,保存书签等等,这些网页上的默认行为都需要阻止掉。另外一个就是监听按键,然后根据自己的需求,处理相应的事件。


基于上面提到的需要做的两件事,我们结合代码详细理解一下。我们写一个简单的例子:

document.onkeydown = function(e) {
    console.log(e);
}

这个页面,在我们按键的时候会执行这个方法,以a按键为例,会打印一下结果:


这个事件有很多的属性和方法,这里我们不会一一进行说明,只是挑出来我们比较感兴趣的几个进行说明。 对照上面提到需要处理的两件事:

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

    第二监听按键类型,按键分两种情况,一种是单独按键(只有一个键),一种是组合键(两个以上按键)。单独按键需要监听事件的keyCode、charCode和which属性。

    这张表介绍的比较详细,出自《JavaScript Madness不同的浏览器的keycode比较



当然使用了jquery也不用担心兼容问题了,直接使用e.keyCode即可。那怎么知道用户使用了组合键呢?

我们看到事件还有这么几个属性:ctrlKey(metaKey)、altKey、shiftKey,当你同时按下组合键的时候,这几个属性会变成true,所以组合键就可以通过监听按键code和这几个属性的状态进行判断了。

举一个简单的例子,监听ctrl(cmd)+ s事件:

document.onkeydown = function(e) {
        var keyCode = e.keyCode || e.which || e.charCode;
        var ctrlKey = e.ctrlKey || e.metaKey;
        if(ctrlKey && keyCode == 83) {
            alert('save');
        }
        e.preventDefault();
        return false;
    }


js监听组合按键的原理基本上就是这个样子了,但是发现了一些问题,比如说:ctrl(cmd)+ w(n、q)等chrome浏览器快捷键无法进行阻止,这个不知道有没有方式进行阻止。个人猜测可能需要更高的权限才能做这件事。

介绍了原理之后,有什么更好的干货要介绍的吗?这个当然没有了。。。

这怎么可能,google是那么的强大,只有想不到没有做不到。只要你想用的,这里都有的。我在网上找到这么一个js感觉用起来还是比较方便的。它就是shortcuts.js,官网地址。还有一个jquery版本的,github地址。 


shortcuts.js支持单独按键和组合按键,同时可以通过配置是组合按键在输入框内失效。它的使用方式是:    

shortcut("[",function() {
    alert("Hi there!");
}, {
    'type':'keydown', //事件
    'propagate':false, //是否支持冒泡
    'disable_in_input':true, //是否在输入框内有效
    'target':document, //作用范围
});


可以通过在源码中扩展特殊按键,是组合按键更丰富。


如果想了解更多的信息,可以自己尝试一下~尊重原创,原文链接



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/605

关闭

js操作DOM事件中event的target和currentTarget的区别

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象。

js事件冒泡和事件捕获详解

事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。

通过原生js对DOM事件的绑定的几种方式总汇

在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。

js中的事件委托或是事件代理详解

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

你知道哪些html事件不能冒泡?

我们都知道一般事件的流程是:事件捕捉——>目标元素发生事件——>事件冒泡。但是不是所有的事件和click事件都一样是冒泡的,那么如何判断给事件是否不能冒泡呢?

js动态元素绑定事件_jquery、原生js实现动态添加新元素_监听事件

在实现click绑定事件的时候,发现只能对已经加载好的元素进行绑定,如果后来通过js动态插入的元素则无法绑定事件

Javascript - 事件顺序

“假设一个元素及其祖先元素的事件句柄指向了同一事件,哪个先触发?”不出意料,这取决于浏览器。

vue自定义移动端touch事件,点击、滑动、长按事件

vue自定义指令_监听移动端touch事件,包括:点击、滑动、长按等事件,加强对Touch的一些理解。Vue.directive指令封装的使用

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!