Question

我试图在javascript中欺骗鼠标事件。这里发生了什么：

// Create event object
var event = new CustomEvent('mousedown');

// Initialize
event.initCustomEvent('mousedown', true, false, {});

// Inherit
event = Object.create(event);
event.pageX = 10;
event.pageY = 10;

现在，派遣......

targetElement.dispatchEvent(event);

当我这样做时，我收到错误：

Error: Failed to execute 'dispatchEvent' on 'EventTarget': The event provided is null.

我做错了什么？

Answer 1

事件必须具有类型的自己的属性，继承的类型属性是不够的mean type 被视为 undefined ，因此错误

// Create event object
var event = new CustomEvent('mousedown', {bubbles: true, cancelable: false});

// initCustomEvent deprecated, see below

// Inherit
event = Object.create(event);
event.type = 'mousedown';
event.pageX = 10;
event.pageY = 10;

此错误也可能是对其他意外行为的警告，这些行为将源于您从事件继承而不是拥有自己的 Object 的方式属性。

CustomEvent 实例未密封，因此您始终可以直接向其添加属性

var ev = new CustomEvent('mousedown', {bubbles: true, cancelable: false});
ev.pageX = 10;
ev.pageY = 10;

请注意customEvent.initCustomEvent方法已弃用，您应该将此信息作为第二个arg中的字典传递给构造函数，

var cev = new CustomEvent('mousedown', {bubbles: true, cancelable: false});

如果您不需要详细信息属性，请考虑使用事件而不是 CustomEvent

var eev = new Event('mousedown', {bubbles: true, cancelable: false});
// cev as above, now consider
'detail' in cev; // true
cev.detail; // null
// vs
'detail' in eev; // false
eev.detail; // undefined

mousedown 事件通常具有0的只读详细信息（很少通过代码检查）

Answer 2

问题在于这一行

event = Object.create(event);

显然，dispatchEvent期望事件对象具有某些拥有的属性，但它无法找到，因为它不会检查原型。然后它假设传递的对象不是格式正确的事件实例。因此错误。

我不确定你为什么要在原型中用原始事件创建新对象，如果没有这一切应该可以工作。

InvalidStateError：无法执行＆＃39; dispatchEvent＆＃39;在＆＃39; EventTarget＆＃39;

2 个答案: