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

Posted 2023-03-13

【中文标题】如何将 Target 属性添加到新的 MouseEvent？

【英文标题】：How to add Target property to a new 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?的可能重复

【参考方案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()