Question

我想编写一个模拟右箭头键上的按键的Javascript测试。这是我尝试创建'keydown'事件：

var data = {
   key: 'ArrowRight'
};
var ev = new KeyboardEvent('keydown', data);
console.log(ev);

http://jsfiddle.net/lsiden/6e7duck6/

当我在开发者控制台中检查输出时，我希望在其中一个事件字段中看到值39，但它似乎仍然未初始化。

KeyboardEvent {which: 0, keyCode: 0, charCode: 0, repeat: false, metaKey: false…}
altKey: false
bubbles: false
cancelBubble: false
cancelable: false
charCode: 0
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
keyCode: 0
keyIdentifier: ""
keyLocation: 0
layerX: 0
layerY: 0
location: 0
metaKey: false
pageX: 0
pageY: 0
path: Array[0]
repeat: false
returnValue: true
shiftKey: false
srcElement: null
target: null
timeStamp: 1430931169397
type: "keydown"
view: null
which: 0
__proto__: KeyboardEvent
.

我尝试按照文档：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent

以前有人这样做过吗？

Answer 1

我不会撒谎，这似乎很奇怪。听起来你需要将该按键事件的所有功能包装到一个函数中，然后测试该函数。

如果您已经这样做并且您需要测试您的函数正在寻找某个keyCode或其他东西，那么您可以使用普通的javascript对象并将其传递给您正在测试的函数。

e.g。

如果你的功能看起来像这样。

function myFunc(evt) {
  if (evt.keyCode === 39) {
    doThis();
  } else {
    doThat();
  }
}

然后为了测试你的函数，你需要的只是一个keyCode等于39的对象。你的函数不应该关心它是用一个附加了一堆其他东西的KeyBoardEvent对象触发的事实。你不需要。

所以你的测试看起来像这样。

var keyboardEvent = {keyCode: 39};
myFunc(keyboardEvent);
// Make sure that doThis() was called and not doThat()

我认为这可以解决您的问题并使事情变得更简单。

Answer 2

我遇到了同样的问题并意识到它适用于Firefox，但不适用于Chrome。 Chrome似乎没有使用＆＃39; key＆＃39; KeyboardEvent中的属性。你必须使用＆＃39; keyIdentifier＆＃39;。要在两种浏览器中进行测试，您可以执行以下操作：

var data = {
       key: 'ArrowRight',
       keyIdentifier:'ArrowRight'
    };
var ev = new KeyboardEvent('keydown', data);
console.log(ev);

使用KeyboardEvent模拟测试的按键

2 个答案: