JS - 键盘事件 - 监听 / 取消监听

Question

我有一个关于JS中键盘事件的问题。

首先，请不要建议我使用jQuery方法，我知道大部分方法（bind/unbind, on/off, one...），但是我使用的是一个内部框架，即使在我们的大多数项目中都使用了jQuery，该框架必须在没有jQuery的情况下工作。

所以，我有一个模块，实际上是基于Swipe.js扩展的滑动工具，在Web和移动环境下都能使用（兼容IE 7+、WebKit（Chrome和Safari）、Moz、Opera和IE10/Windows Phone）。

对于鼠标/触摸事件，我没有任何问题，灵感来自于mobile HTML5 BP的绑定和解绑方法似乎非常有效，只需对detachEvents方法进行一些小的更改即可。

然后，我想实现一个基于“keydown”事件的键盘控制功能。 （顺便说一下，我不确定如何区分keydon和keypress事件，除了keypressEvent.preventDefault()无法防止小滚动效果外，因此我使用keydown。）

由于同一页可以添加多个Swipes，因此我只有在任何Swipe获得焦点时才开始监听keydown事件（请注意，我添加了“tabindex”属性以允许元素获得焦点）。

<div id="swipe1" class="swipe" tabindex='0'>
    <ul>
        [...]
    </ul>
</div>

当滑动处理'touchstart'/'click'/'MSPointerDown'事件时，我会将其聚焦：

onTouchStart: function(e) {
    this.container.focus(); // Refers to the div#swipe1.swipe element
    [...]
    return false;
}

onFocus: function (e) {
    if (this.activateKeyboardControls) { // Keyboard control is optional
        this.addListener(document, 'keydown', this, true);
    }
}

onBlur: function (e) {
    if (this.activateKeyboardControls) { // Keyboard control is optional
        this.removeListener(document, 'keydown', this, true);
    }
}

但不幸的是，removeListener 不起作用。

我的意思是，当元素失去焦点（触发 blur 事件）时，它仍然处理 keydown 事件...

这是因为它绑定在 document 对象上吗？ 我已经阅读了一些解决方案，可以使用一些布尔值来解决，但我正在寻找一种更清洁的方式来管理它。

这很烦人，因为当我将焦点放在许多 Swipe 上时，每个 Swipe 都会在我按键盘时滑动。

- Flo Schild

Answer 1

我不确定我的答案被删除的原因 - 发表后超过2周 - 但无论如何，这是我的解决方法：

它来自 addEventListener / attachEvent 方法的 'type' 参数，第一个…

我将其绑定在对象上，而不是窗口上，并且没有冒泡。

var target = e.target || e.srcElement;
if (this.activateKeyboardControls) {
    this.addListener(target, 'keydown', this, false);
}

- Flo Schild