自定义键盘事件不冒泡答案

【问题标题】：Custom KeyboardEvent does not bubble自定义键盘事件不冒泡
【发布时间】：2019-09-13 20:11:50
【问题描述】：

由于某种原因，我的自定义 KeyboardEvent 没有冒泡。我负责处理持有钥匙：

document.addEventListener('DOMContentLoaded', function () {
  var isPressed = false;
  var startTimeStamp;

  document.addEventListener('keydown', function (e) {    
    if (!isPressed) {
      startTimeStamp = e.timeStamp;
      isPressed = true;
    }
  });

  document.addEventListener('keyup', function (e) {
    isPressed = false;

    var eventDuration = e.timeStamp - startTimeStamp;

    var _e = new KeyboardEvent('keyheld', {
      bubbles: true,
      cancelBubble: false,
      cancelable: true,
      char: e.char,
      charCode: e.charCode,
      key: e.key,
      keyCode: e.keyCode,
      which: e.which,
      shiftKey: e.shiftKey,
      ctrlKey: e.ctrlKey,
      altKey: e.altKey,
      metaKey: e.metaKey
    });

    Object.defineProperty(_e, 'detail', {
        value: {
            duration: eventDuration
        },
        enumerable: true
    });

    document.dispatchEvent(_e);
  });
});

然后我可以使用附加到document 的侦听器来处理keyheld 事件。尽管如此，附加到任何东西的监听器（下面是body）else 根本不会触发：

document.addEventListener('DOMContentLoaded', function () {
    document.body.addEventListener('keyheld', function (e) {
      console.log('KEY HELD: ', e.detail.duration, e);
    });
});

上面的代码不起作用，更奇怪的是，即使true 作为addEventListener() 的第三个参数提供，它应该在捕获而不是冒泡时触发侦听器。

这里可能有什么问题？

【问题讨论】：

尝试将其添加到窗口本身

标签： javascript dom-events event-bubbling

【解决方案1】：

当你调用document.dispatchEvent(event)时，事件is dispatched with its target set todocument，这是DOM层次结构中的顶级节点，可以看到in an illustration here。

事件通常会bubble 发送给目标元素的父元素，但是当目标是document 时，没有父元素 (document.parentNode === null)。出于同样的原因，尝试在 body 上注册捕获侦听器不起作用。

您可能想要分派到原始事件的目标：e.target.dispatchEvent(_e)。

【讨论】：