无法使用Object.assign获取文档keydown事件

Posted 2021-04-01

我在用

sources.DOM.select('document').events('keydown')
  .map(ev => Object.assign({}, ev, {type: 'keydown'}))

但是生成的流只给对象带有“isTrusted”属性（而不是“key”，“code”等）。相反，使用'mousemove'我会按预期获得事件（使用“isTrusted”，但也可以使用“movementX”，“movementY”等）。怎么了？

答案

你是对的，不是Cycle.js问题，而是Object.assign的限制。

简单地说，Object.assign不会复制继承的属性。

This answer上的similar problem提供了一个可行的替代方案：

function main (sources) {
  const vdom$ = sources.DOM.select('document').events('keydown')
    .map(ev => cloneEvent(ev))
    .map(mykey => div('Key pressed: ' + mykey.key + ', code:' + mykey.code))
    .startWith(div('Press a key.'))

  return {
    DOM: vdom$
  }
}

function cloneEvent(e) {
  if (e===undefined || e===null) return undefined;
  function ClonedEvent() {};  
  let clone=new ClonedEvent();
  for (let p in e) {
    let d=Object.getOwnPropertyDescriptor(e, p);
    if (d && (d.get || d.set)) Object.defineProperty(clone, p, d); else clone[p] = e[p];
  }
  Object.setPrototypeOf(clone, e);
  return clone;
}

查看更新的codepen.io example。

这些SO问题和答案也有助于澄清情况：

Poor Use Case of Object.assign() - Simple Example

Javascript hasOwnProperty always false on Event objects?