- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试开发一个 JavaScript 游戏引擎,但遇到了这个问题:
keydown
函数来获得按下的键。如何检查是否同时按下了多个键?
最佳答案
注意:keyCode 现在是 deprecated.
如果您了解这个概念,则多次击键检测很容易
我的做法是这样的:
var map = {}; // You could also use an array
onkeydown = onkeyup = function(e){
e = e || event; // to deal with IE
map[e.keyCode] = e.type == 'keydown';
/* insert conditional here */
}
这段代码非常简单:由于计算机一次只传递一个按键,因此创建了一个数组来跟踪多个按键。然后可以使用该数组一次检查一个或多个键。
keydown
事件集
map[e.keyCode]
到
e.type == keydown
的值,其计算结果为真或假。现在都
map[65]
和
map[66]
设置为
true
.当你放开
A
,
keyup
事件触发,导致相同的逻辑为
map[65]
确定相反的结果(A),现在是假的,但因为
map[66]
(B) 仍然“down”(它没有触发 keyup 事件),它仍然是真的。
map
通过这两个事件,数组看起来像这样:
// keydown A
// keydown B
[
65:true,
66:true
]
// keyup A
// keydown B
[
65:false,
66:true
]
您现在可以做两件事:
element
指向它。 .
element.innerHTML = '';
var i, l = map.length;
for(i = 0; i < l; i ++){
if(map[i]){
element.innerHTML += '<hr>' + i;
}
}
注意:您可以通过
id
轻松抓取元素属性。
<div id="element"></div>
这将创建一个 html 元素,可以在 javascript 中使用
element
轻松引用该元素。
alert(element); // [Object HTMLDivElement]
您甚至不必使用
document.getElementById()
或
$()
捕获它。但是为了兼容性,使用jQuery的
$()
被更广泛地推荐。
/*insert conditional here*/
是,拿这个例子:
if(map[17] && map[16] && map[65]){ // CTRL+SHIFT+A
alert('Control Shift A');
}else if(map[17] && map[16] && map[66]){ // CTRL+SHIFT+B
alert('Control Shift B');
}else if(map[17] && map[16] && map[67]){ // CTRL+SHIFT+C
alert('Control Shift C');
}
function test_key(selkey){
var alias = {
"ctrl": 17,
"shift": 16,
"A": 65,
/* ... */
};
return key[selkey] || key[alias[selkey]];
}
function test_keys(){
var keylist = arguments;
for(var i = 0; i < keylist.length; i++)
if(!test_key(keylist[i]))
return false;
return true;
}
用法:
test_keys(13, 16, 65)
test_keys('ctrl', 'shift', 'A')
test_key(65)
test_key('A')
这样更好吗?
if(test_keys('ctrl', 'shift')){
if(test_key('A')){
alert('Control Shift A');
} else if(test_key('B')){
alert('Control Shift B');
} else if(test_key('C')){
alert('Control Shift C');
}
}
(编辑结束)
// CTRL+ENTER
)之类的东西,这样您就可以记住它们是什么。
CTRL+ENTER => map[17] && map[13]
,而不是
map[13] && map[17]
)。这样,当您需要返回并编辑代码时,您将永远不会感到困惑。
// Correct:
if(map[17] && map[16] && map[13]){ // CTRL+SHIFT+ENTER
alert('Whoa, mr. power user');
}else if(map[17] && map[13]){ // CTRL+ENTER
alert('You found me');
}else if(map[13]){ // ENTER
alert('You pressed Enter. You win the prize!')
}
// Incorrect:
if(map[17] && map[13]){ // CTRL+ENTER
alert('You found me');
}else if(map[17] && map[16] && map[13]){ // CTRL+SHIFT+ENTER
alert('Whoa, mr. power user');
}else if(map[13]){ // ENTER
alert('You pressed Enter. You win the prize!');
}
// What will go wrong: When trying to do CTRL+SHIFT+ENTER, it will
// detect CTRL+ENTER first, and override CTRL+SHIFT+ENTER.
// Removing the else's is not a proper solution, either
// as it will cause it to alert BOTH "Mr. Power user" AND "You Found Me"
问题:“即使我没有按下按键,这个组合键也会一直激活”
map = []
在条件完成后重置数组。这是因为有些事情,比如
alert()
, 将焦点从主窗口移开并导致 'keyup' 事件不触发。例如:
if(map[17] && map[13]){ // CTRL+ENTER
alert('Oh noes, a bug!');
}
// When you Press any key after executing this, it will alert again, even though you
// are clearly NOT pressing CTRL+ENTER
// The fix would look like this:
if(map[17] && map[13]){ // CTRL+ENTER
alert('Take that, bug!');
map = {};
}
// The bug no longer happens since the array is cleared
陷阱:浏览器默认值
return false
之后
map = []
,因此当“复制文件”功能被放置在 CtrlD 上时,您网站的用户不会感到沮丧,而是将页面添加为书签。
if(map[17] && map[68]){ // CTRL+D
alert('The bookmark window didn\'t pop up!');
map = {};
return false;
}
无
return false
,将弹出书签窗口,让用户感到沮丧。
event.preventDefault()
功能在那里。它所做的是设置一个内部标志,告诉解释器
不是 允许浏览器运行其默认操作。之后,函数继续执行(而
return
将立即退出函数)。
return false
之前先了解这种区别或
e.preventDefault()
event.keyCode
已弃用
event.keyCode
已弃用。
event.key
,它返回被按下的键的字符串表示,如
"a"
对于 A,或
"Shift"
换档。
element.onevent
对比
element.addEventListener
在
addEventListener
注册的处理程序可以堆叠,按注册顺序调用,同时设置
.onevent
direct 是相当激进的,并且会覆盖您之前拥有的任何内容。
document.body.onkeydown = function(ev){
// do some stuff
ev.preventDefault(); // cancels default actions
return false; // cancels this function as well as default actions
}
document.body.addEventListener("keydown", function(ev){
// do some stuff
ev.preventDefault() // cancels default actions
return false; // cancels this function only
});
.onevent
属性似乎覆盖了
ev.preventDefault()
的所有内容和行为和
return false;
可能相当难以预测。
addEventlistener
注册。似乎更容易编写和推理。
attachEvent("onevent", callback)
来自 Internet Explorer 的非标准实现,但这已经过时了,甚至不属于 JavaScript(它属于一种称为 JScript 的深奥语言)。尽可能避免多语言代码符合您的最大利益。
function Input(el){
var parent = el,
map = {},
intervals = {};
function ev_kdown(ev)
{
map[ev.key] = true;
ev.preventDefault();
return;
}
function ev_kup(ev)
{
map[ev.key] = false;
ev.preventDefault();
return;
}
function key_down(key)
{
return map[key];
}
function keys_down_array(array)
{
for(var i = 0; i < array.length; i++)
if(!key_down(array[i]))
return false;
return true;
}
function keys_down_arguments()
{
return keys_down_array(Array.from(arguments));
}
function clear()
{
map = {};
}
function watch_loop(keylist, callback)
{
return function(){
if(keys_down_array(keylist))
callback();
}
}
function watch(name, callback)
{
var keylist = Array.from(arguments).splice(2);
intervals[name] = setInterval(watch_loop(keylist, callback), 1000/24);
}
function unwatch(name)
{
clearInterval(intervals[name]);
delete intervals[name];
}
function detach()
{
parent.removeEventListener("keydown", ev_kdown);
parent.removeEventListener("keyup", ev_kup);
}
function attach()
{
parent.addEventListener("keydown", ev_kdown);
parent.addEventListener("keyup", ev_kup);
}
function Input()
{
attach();
return {
key_down: key_down,
keys_down: keys_down_arguments,
watch: watch,
unwatch: unwatch,
clear: clear,
detach: detach
};
}
return Input();
}
这个类不会做所有事情,也不会处理所有可以想象的用例。我不是图书馆人。但是对于一般的交互式使用,它应该没问题。
var input_txt = Input(document.getElementById("txt"));
input_txt.watch("print_5", function(){
txt.value += "FIVE ";
}, "Control", "5");
这将做的是将一个新的输入监听器附加到带有
#txt
的元素上。 (假设它是一个文本区域),并为键组合设置一个观察点
Ctrl+5
.当两者
Ctrl
和
5
关闭时,您传入的回调函数(在本例中为将
"FIVE "
添加到 textarea 的函数)将被调用。回调与名称
print_5
相关联,因此要删除它,您只需使用:
input_txt.unwatch("print_5");
分离
input_txt
来自
txt
元素:
input_txt.detach();
这样,垃圾收集可以捡起对象(
input_txt
),如果它被扔掉,并且您不会留下旧的僵尸事件监听器。
Boolean key_down (String key);
Returns
true
ifkey
is down, false otherwise.Boolean keys_down (String key1, String key2, ...);
Returns
true
if all keyskey1 .. keyN
are down, false otherwise.void watch (String name, Function callback, String key1, String key2, ...);
Creates a "watchpoint" such that pressing all of
keyN
will trigger the callbackvoid unwatch (String name);
Removes said watchpoint via its name
void clear (void);
Wipes the "keys down" cache. Equivalent to
map = {}
abovevoid detach (void);
Detaches the
ev_kdown
andev_kup
listeners from the parent element, making it possible to safely get rid of the instance
a+w
同时,将这些方法“组合”成多键查找也不会太困难。
关于javascript - 如何使用 JavaScript 检测是否一次按下多个键?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5203407/
这是一个与 Get OS-Version in WinRT Metro App C# 相关的问题但不是它的重复项。 是否有任何选项可以从 Metro 应用程序检测系统上是否有可用的桌面功能?据我所知,
我想在闹钟响起时做点什么。例如, toast 或设置新闹钟。我正在寻找可以检测闹钟何时响起的东西。首先,我在寻找广播 Action ,但找不到。也许是我的错? 当闹钟响起时,还有其他方法可以做些什么吗
如果某个 JS 添加了一个突变观察者,其他 JS 是否有可能检测、删除、替换或更改该观察者?我担心的是,如果某些 JS 旨在破坏某些 DOM 元素而不被发现,那么 JS 可能想要摆脱任何观察该 DOM
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗?更新问题,以便将其作为on-topi
有没有办法在您的 Activity/应用程序中(以编程方式)知道用户已通过 USB 将您的手机连接到 PC? 最佳答案 有人建议使用 UMS_CONNECTED自最新版本的 Android 起已弃用
我正在想办法测量速度滚动事件,这将产生某种代表速度的数字(相对于所花费的时间,从滚动点 A 到点 B 的距离)。 我欢迎任何以伪代码形式提出的建议...... 我试图在网上找到有关此问题的信息,但找不
某些 JavaScript 是否可以检测 Skype 是否安装? 我问的原因是我想基于此更改链接的 href:如果未安装 Skype,则显示一个弹出窗口,解释 Skype 是什么以及如何安装它,如果已
我们正在为 OS X 制作一个使用 Quartz Events 移动光标的用户空间设备驱动程序,当游戏(尤其是在窗口模式下运行的游戏)无法正确捕获鼠标指针时,我们遇到了问题(= 将其包含/保留在其窗口
我可以在 Controller 中看到事件 $routeChangeStart,但我不知道如何告诉 Angular 留下来。我需要弹出类似“您要保存、删除还是取消吗?”的信息。如果用户选择取消,则停留
我正在解决一个问题,并且已经花了一些时间。问题陈述:给你一个正整数和负整数的数组。如果索引处的数字 n 为正,则向前移动 n 步。相反,如果为负数(-n),则向后移动 n 步。假设数组的第一个元素向前
我试图建立一个条件,其中 [i] 是 data.length 的值,问题是当有超过 1 个值时一切正常,但当只有 1 个值时,脚本不起作用。 out.href = data[i].hr
这是我的问题,我需要检测图像中的 bolt 和四分之一,我一直在搜索并找到 OpenCV,但据我所知它还没有在 Java 中。你们打算如何解决这个问题? 最佳答案 实际上有一个 OpenCV 的 Ja
是否可以检测 ping? IE。设备 1 ping 设备 2,我想要可以在设备 2 上运行的代码,该代码可以在设备 1 ping 设备时进行检测。 最佳答案 ping 实用程序使用的字面消息(“ICM
我每天多次运行构建脚本。我的感觉是我和我的同事花费了大量时间等待这个脚本执行。现在想知道:我们每天花多少时间等待脚本执行? .我可以对总体平均值感到满意,即使我真的很想拥有每天的数据(例如“上周一我们
我已经完成了对项目的编码,但是当我在客户端中提交了源代码时,就对它进行了测试,然后检测到内存泄漏。我已经在Instruments using Leaks中进行了测试。 我遇到的问题是AVPlayer和
我想我可以用 std.traits.functionAttributes 来做到这一点,但它不支持 static。对于任何类型的可调用对象(包含 opCall 的结构),我如何判断该可调用对象是否使用
我正在使用多核 R 包中的并行和收集函数来并行化简单的矩阵乘法代码。答案是正确的,但并行版本似乎与串行版本花费的时间相同。 我怀疑它仅在一个内核上运行(而不是在我的机器上可用的 8 个内核!)。有没有
我正在尝试在读取 csv 文件时编写一个这样的 if 语句: if row = [] or EOF: do stuff 我在网上搜索过,但找不到任何方法可以做到这一点。帮忙? 最佳答案 wit
我想捕捉一个 onFontSizeChange 事件然后做一些事情(比如重新渲染,因为浏览器已经改变了我的字体大小)。不幸的是,不存在这样的事件,所以我必须找到一种方法来做到这一点。 我见过有人在不可
我有一个使用 Windows 服务的 C# 应用程序,该服务并非始终打开,我希望能够在该服务启动和关闭时发送电子邮件通知。我已经编写了电子邮件脚本,但我似乎无法弄清楚如何检测服务状态更改。 我一直在阅
我是一名优秀的程序员,十分优秀!