如何将 Target 属性添加到新的 MouseEvent？答案

【问题标题】：How to add Target property to a new MouseEvent?如何将 Target 属性添加到新的 MouseEvent？
【发布时间】：2019-07-19 03:17:18
【问题描述】：

我正在尝试调度 contextMenu 事件，并注意到在 documentation of contextMenu 中的 MouseEvent; interface for TypeScript there isn't atarget` 属性中。

我的 TS sn-p

const emulatedMouseEvent: MouseEvent = new MouseEvent('contextmenu', {
  bubbles: true,
  altKey: event.args[0],
  ctrlKey: event.args[1],
  shiftKey: event.args[2]
})
this.webview.dispatchEvent(emulatedMouseEvent)

尝试添加target: event.args[3]时出现TS错误

Argument of type '{ bubbles: true; altKey: any; ctrlKey: any; shiftKey: any; target: any; }' is not assignable to parameter of type 'MouseEventInit'.
  Object literal may only specify known properties, and 'target' does not exist in type 'MouseEventInit'.ts(2345)

在 lib.dom.d.ts 中

interface MouseEvent extends UIEvent {
    readonly altKey: boolean;
    readonly button: number;
    readonly buttons: number;
    readonly clientX: number;
    readonly clientY: number;
    readonly ctrlKey: boolean;
    /** @deprecated */
    readonly fromElement: Element;
    readonly layerX: number;
    readonly layerY: number;
    readonly metaKey: boolean;
    readonly movementX: number;
    readonly movementY: number;
    readonly offsetX: number;
    readonly offsetY: number;
    readonly pageX: number;
    readonly pageY: number;
    readonly relatedTarget: EventTarget;
    readonly screenX: number;
    readonly screenY: number;
    readonly shiftKey: boolean;
    /** @deprecated */
    readonly toElement: Element;
    /** @deprecated */
    readonly which: number;
    readonly x: number;
    readonly y: number;
    getModifierState(keyArg: string): boolean;
    initMouseEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number, screenXArg: number, screenYArg: number, clientXArg: number, clientYArg: number, ctrlKeyArg: boolean, altKeyArg: boolean, shiftKeyArg: boolean, metaKeyArg: boolean, buttonArg: number, relatedTargetArg: EventTarget | null): void;
}

declare var MouseEvent: {
    prototype: MouseEvent;
    new(typeArg: string, eventInitDict?: MouseEventInit): MouseEvent;
};

当然在the MouseEvent documentation 中没有Target 属性，但我不知道我应该如何使用目标属性创建此contextmenu 事件，该事件本身存在但不存在当然是 MouseEvent。

编辑：不是重复的，该问题涉及目标返回 null 并且解决方案不足以解决该问题。

【问题讨论】：

How to set target property when simulating mouseclick in javascript?的可能重复

标签： javascript typescript events dom-events

【解决方案1】：

MouseEvent extends UIEvent, UIEvent extends Event, 事件有 target 属性。

【讨论】：

检查帖子的编辑，MouseEventInit 没有那个属性。
检查该问题的第一个答案。 MouseEvent.target 在创建过程中不能指定，它会自动设置为创建事件被调度的元素。

【解决方案2】：

我遇到了这个问题，我需要创建带有 target 集的事件，因为底层库依赖于它，我通过创建一个接受 MouseEventInit & { target: EventTarget } 的函数来解决它

function mouseEvent(event: string, args: MouseEventInit & { target: EventTarget }): MouseEvent {
  return new MouseEvent(event, { bubbles: true, ...args });
}

然后您可以调用mouseEvent('contextmenu', { target }) 而不是new MouseEvent()

【讨论】：