javascript - JS - 键盘事件 - 听/不听

Question

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

首先，请不要回答我使用 jQuery 方法，我知道其中的大部分(绑定(bind)/解除绑定(bind)，开/关，一个......)但我使用内部框架必须在没有 jQuery 的情况下工作，即使我们的大多数项目都使用了 jQuery。

所以，我有一个模块，实际上是一个基于 Swipe.js 的刷卡工具并扩展到在网络和移动环境中工作(IE 7+、WebKit(Chrome 和 Safari)、Moz、Opera 和 IE10/Windows Phone 需要兼容性)

在鼠标/触摸事件没有任何问题的情况下，绑定(bind)和解除绑定(bind)的方法灵感来自the mobile HTML5 BP似乎对 detachEvents 方法进行了小的修正后效果很好。

然后我会根据“keydown”事件实现键盘控制功能。 (顺便说一句，我不确定 keydon 和 keypress 事件之间的区别，除了 keypressEvent.preventDefault() 不会阻止小滚动效果，所以我使用 keydown。)

因为可以在同一页面上添加多个滑动，所以我仅在任何滑动获得焦点时才开始监听 keydown 事件(请注意，我添加了“tabindex”属性以允许元素获得焦点)。

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

然后当 Swipe 处理 '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 不起作用。

我的意思是，当元素失去焦点(触发模糊事件)时，它仍然处理按键事件...

是因为它绑定(bind)在文档对象上吗？ 我已经阅读了一些使用 bool 值的解决方案，但我正在寻找一种更简洁的管理方式。

这很烦人，因为当我将焦点放在许多滑动上时，当我按下键盘时它们中的每一个都在滑动。

Answer 1

我不确定我的答案被删除的原因 - 发布后超过 2 周 - 但无论如何，我就是这样解决的:

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

我把它绑定(bind)在对象上而不是窗口上，而且没有冒泡。

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