为了账号安全,请及时绑定邮箱和手机立即绑定

检测javascript中按键的最简单方法

/ 猿问

检测javascript中按键的最简单方法

PIPIONE 2019-10-19 16:31:59

我有一个使用javascript进行游戏的想法(我将使用EaselJS进行开发),并且我将不得不检测按键。在互联网上四处浏览后,我看到了很多建议(使用window.onkeypress,使用jQuery等),但是几乎每个选项都有一个反对意见。你们有什么建议?使用jQuery听起来很容易,但是我实际上对该库没有任何经验(而且我也不是JavaScript的资深人士),所以我宁愿避免使用它。如果jQuery是最好的选择,那么有人可以举一个很好的例子(说明会很棒)吗?

我猜这被问了很多,但是我找不到任何明确的答案。提前致谢!


查看完整描述

3 回答

?
繁花不似锦

使用纯Javascript,最简单的方法是:


document.onkeypress = function (e) {

    e = e || window.event;

    // use e.keyCode

};

但与此同时,您只能为该事件绑定一个处理程序。


此外,您可以使用以下命令将多个处理程序潜在地绑定到同一事件:


addEvent(document, "keypress", function (e) {

    e = e || window.event;

    // use e.keyCode

});


function addEvent(element, eventName, callback) {

    if (element.addEventListener) {

        element.addEventListener(eventName, callback, false);

    } else if (element.attachEvent) {

        element.attachEvent("on" + eventName, callback);

    } else {

        element["on" + eventName] = callback;

    }

}

无论哪种情况,keyCode在浏览器之间都不是一致的,因此还有更多要检查和找出的问题。注意e = e || window.event-这是Internet Explorer的正常问题,将事件放入window.event而不是将事件传递给回调。


参考文献:


https://developer.mozilla.org/zh-CN/docs/DOM/Mozilla_event_reference/keypress

https://developer.mozilla.org/zh-CN/docs/DOM/EventTarget.addEventListener

使用jQuery:


$(document).on("keypress", function (e) {

    // use e.which

});

参考:


http://api.jquery.com/on/

除了jQuery是一个“大型”库之外,jQuery确实可以帮助解决浏览器之间的不一致问题,尤其是窗口事件的问题……这是不能否认的。希望很明显,我为您的示例提供的jQuery代码更优雅,更短,但是以一致的方式实现了您想要的功能。您应该能够相信e(事件)和e.which(键码,用于知道按下了哪个键)是正确的。在普通的Javascript中,除非您执行jQuery库内部执行的所有操作,否则很难知道。


请注意,有一个keydown事件与有所不同keypress。您可以在这里了解更多有关它们的信息:onKeyPressVs。onKeyUp和onKeyDown


至于建议使用什么,如果您愿意学习框架,我肯定会建议使用jQuery。同时,我想你应该学习Javascript的语法,方法,功能以及如何与DOM交互。一旦了解了它的工作原理和正在发生的事情,就应该更轻松地使用jQuery。对我来说,jQuery使事情变得更加一致和简洁。最后,它是Javascript,并包装了语言。


jQuery非常有用的另一个示例是AJAX。浏览器与AJAX请求的处理方式不一致,因此jQuery可以抽象出来,因此您不必担心。


这可能有助于做出决定:


http://www.jscripters.com/jquery-disadvantages-and-advantages/


查看完整回答
反对 回复 2019-10-19
?
慕容708150

KEYPRESS 

(输入键)


香草:


document.addEventListener("keypress", function(event) {

    if (event.keyCode == 13) {

        alert('hi.')

    }

})

香草速记:


this.addEventListener('keypress', event => {

    if (event.keyCode == 13) {

        alert('hi.')

    }

})

jQuery的:


$(this).on('keypress', function(event) {

    if (event.keyCode == 13) {

        alert('hi.')

    }

})

jQuery经典:


$(this).keypress(function(event) {

    if (event.keyCode == 13) {

        alert('hi.')

    }

})

jQuery简写:


$(this).keypress((e) => {

    if (e.which == 13) {

        alert('hi.')

    }

})

甚至更短:


$(this).keypress(e=>

    e.which==13?

    alert('hi.'):null

)


查看完整回答
反对 回复 2019-10-19
?
繁华开满天机

使用event.key和现代的JS!

没有数字代码了。您可以使用"Enter","ArrowLeft","r",或任意键名称直接,使你的代码更具可读性。


document.addEventListener("keypress", function onEvent(event) {

    if (event.key === "ArrowLeft") {

        // Move Left

    }

    else if (event.key === "Enter") {

        // Open Menu...

    }

});


查看完整回答
反对 回复 2019-10-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信