How to add Target property to a new MouseEvent?

Question

I'm trying to dispatch a contextMenu event and have noticed that in the MouseEvent; interface for TypeScript there isn't atarget` property which is in the documentation of contextMenu.

my TS snippet

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

TS Error when trying to add target: event.args[3]

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)

and in 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;
};

of course in the MouseEvent documentation there isn't a Target property but I don't know how I'm supposed to create this contextmenu event with the target property which does exist on the event itself but not on MouseEvent of course.

Edit: not a duplicate, that question deals with Target being returned null and the solution does not suffice for this question.

Possible duplicate of [How to set target property when simulating mouseclick in javascript?](https://stackoverflow.com/questions/27108094/how-to-set-target-property-when-simulating-mouseclick-in-javascript) — Mezo Istvan, Feb 25 '19 at 17:03

score 1 · Answer 1 · answered Mar 26 '20 at 01:04

I ran into this issue where I needed to create events with target set because an underlying library relied on it, I worked around it by creating a function that accepts MouseEventInit & { target: EventTarget }

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

You can then call mouseEvent('contextmenu', { target }) instead of new MouseEvent()

score -1 · Answer 2 · answered Feb 25 '19 at 16:58

-1

MouseEvent extends UIEvent, UIEvent extends Event, Event has target property.

answered Feb 25 '19 at 16:58

Mezo Istvan

2,664
1
14
17

Check the edit to the post, the MouseEventInit does not have that property. – Daniel Turcich Feb 25 '19 at 18:36
Check the first answer in that question. `MouseEvent.target` cannot be specified during creation, it is automatically set to the element the created event is dispatched on. – Mezo Istvan Feb 25 '19 at 22:06

How to add Target property to a new MouseEvent?

2 Answers2