javascript - 如何在 Angular 中创建 MouseEvent，包括位置属性

Question

我只需要捕捉按钮上的点击事件并更改事件 type 并再次发送它

下面类似的东西在 jquery 中，但我想用 Angular 来做

button.on("click", function(event) {
              var newEvent = $.extend({}, event, { type: "dxcontextmenu" });
              event.stopPropagation();
              $(this).trigger(newEvent);
            });

我可以执行 dispatchEvent 但 Event 或 MouseEvent 构造函数没有 screenX 或clientX 或 ...

我尝试使用扩展运算符或 Object.Assign，但只有 isTrusted 和 type 属性会被复制。

我的代码是

onClick(event:any) {
    event.stopPropagation();

        console.log(event);

        const newEvent = Object.assign({}, event, { type: 'dxcontextmenu' });
        console.log(newEvent);
        event.target.dispatchEvent(newEvent);

    // event.target.dispatchEvent(new Event('dxcontextmenu', { bubbles: true }));

  }

这是stackblitz链接到它

Answer 1

如果其他人有同样的问题，我找到了解决方案

openContextMenu(event: MouseEvent)
{
    if (event.target)
    {
        const newEvent = new MouseEvent('dxcontextmenu', { bubbles: true });
        newEvent.initMouseEvent(
            'dxcontextmenu',
            true,
            false,
            event.view,
            event.detail,
            event.screenX,
            event.screenY,
            event.clientX,
            event.clientY,
            event.ctrlKey,
            event.altKey,
            event.shiftKey,
            event.metaKey,
            event.button,
            event.relatedTarget
        );

        event.stopPropagation();
        event.target.dispatchEvent(newEvent);
    }
}