InvalidStateError: Failed to execute 'dispatchEvent'

InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget'

本文关键字：dispatchEvent execute Failed to InvalidStateError      更新时间：2023-09-26

我试图在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);

当我这样做时，我得到错误:

错误:Failed to execute 'dispatchEvent' on 'EventTarget':提供的事件为空。

我做错了什么?

事件必须有自己的类型属性，继承的类型属性是不够的，这意味着类型被视为未定义，因此出现错误

// 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;

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

CustomEvent实例不是密封的，所以你总是可以直接给它们添加属性

var ev = new CustomEvent('mousedown', {bubbles: true, cancelable: false});
ev.pageX = 10;
ev.pageY = 10;
注意，customEvent.initCustomEvent方法是已弃用的，您应该将此信息作为第二个参数 中的字典传递给构造函数。
var cev = new CustomEvent('mousedown', {bubbles: true, cancelable: false});

如果你不需要detail属性，考虑使用Event而不是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的只读详细信息(很少被代码检查)

问题出在这一行

event = Object.create(event);

显然，dispatchEvent期望事件对象有一定的自己的属性，它找不到，因为它没有检查原型。然后假定传递的对象不是格式良好的事件实例。因此出现了错误。

我不知道为什么你要在原型中创建具有原始事件的新对象，没有这个一切都应该工作

相关文章：