javascript - ¿Cómo agregar la propiedad Target a un nuevo MouseEvent?
Estoy intentando despachar un evento contextMenu y he notado que en la interfaz MouseEvent; para TypeScript no hay una propiedad `target` que sí aparece en la documentación de contextMenu.
mi fragmento de TS
const emulatedMouseEvent: MouseEvent = new MouseEvent('contextmenu', {
bubbles: true,
altKey: event.args[0],
ctrlKey: event.args[1],
shiftKey: event.args[2]
})
this.webview.dispatchEvent(emulatedMouseEvent)
Error de TS al intentar agregar 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)
y en 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;
};
Por supuesto, en la documentación de MouseEvent no hay una propiedad Target, pero no sé cómo se supone que debo crear este evento contextmenu con la propiedad target, que sí existe en el evento en sí, pero no en MouseEvent, por supuesto.
Editar: no es un duplicado, esa pregunta trata sobre que Target se devuelve como null y la solución no es suficiente para esta pregunta.
Respuesta #1
Me encontré con este problema donde necesitaba crear eventos con target establecido porque una biblioteca subyacente dependía de ello, lo solucioné creando una función que acepta MouseEventInit & { target: EventTarget }
function mouseEvent(event: string, args: MouseEventInit & { target: EventTarget }): MouseEvent {
return new MouseEvent(event, { bubbles: true, ...args });
}
Entonces puedes llamar a mouseEvent('contextmenu', { target }) en lugar de new MouseEvent()
Respuesta #2
MouseEvent extiende UIEvent, UIEvent extiende Event, Event tiene la propiedad target.
