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

【问题标题】：Cannot get document keydown events with Object.assign无法使用 Object.assign 获取文档 keydown 事件
【发布时间】：2018-11-04 14:40:49
【问题描述】：

我正在使用

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

但生成的流只提供具有“isTrusted”属性（而不是“key”、“code”等）的对象。相反，使用“mousemove”我会得到预期的事件（使用“isTrusted”但也有“movementX”、“movementY”等）。怎么了？

【问题讨论】：

Works okay here. 你用的是什么版本的 Cycle DOM？
抱歉，我用导致问题的部分编辑了问题中的代码（我不怀疑它是）。所以问题是 Object.assign，它不会将事件对象的所有属性复制到新对象中。在我看来，除了“isTrusted”之外，Object.assign 和 JSON.stringify 都忽略了事件对象的属性。你知道为什么吗？

标签： javascript object events cyclejs

【解决方案1】：

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

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

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

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?

【讨论】：

感谢您的澄清。为了解决这个问题，我将事件对象封装在一个新对象 {event: ev, type: 'keydown'} 中，以避免弄乱对象的内部细节。
我同意——更简单的方法。