CODEWITHSUNDEEP
javascriptangularevents
Reza
Reza

Reputation: 19843

How to create MouseEvent in Angular including location properties

I need to catch click event on button and changing event type only and dispatching it again

something similar below which is in jquery but I want to do it in angular

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

I am able to do dispatchEvent but Event or MouseEvent constructor doesn't have params for screenX or clientX or ...

I tried to use spread operator or Object.Assign but only isTrusted and type properties will be copied.

my code is 

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 }));

  }

this is the stackblitz link to it

Upvotes: 2

Views: 5396

Answers (1)

Reza
Reza

Reputation: 19843

I found the solution in case other having same problem

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);
    }
}

Upvotes: 1

Related Questions