javascript - 自定义 KeyboardEvent 不冒泡

Question

出于某种原因，我的自定义 KeyboardEvent 没有冒泡。我负责处理持有的 key :

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)的监听器根本不会触发:

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

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

这里可能出了什么问题？

Answer 1

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

事件通常会 bubble到目标元素的父元素，但是当目标是 document 时，没有父元素 (document.parentNode === null)。出于同样的原因，尝试在 body 上注册一个捕获监听器是行不通的。

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