javascriptmouseeventonmouseup

Unable to trigger onmouseup event on an <tr> element through JavaScript console on Chrome


Unable to trigger onmouseup event on an "tr" element through Javacript console on Chrome.

The element is like this (can't share the exact code sorry):

< tr class="one" style="height:20px;" onmouseup="click(event,this)"> Text </tr>

In the console, I did the following steps:

document.getElementsByClassName("one")[0].onmouseup()

I get the error:

Uncaught TypeError: Cannot read property 'metaKey' of undefined
    at Object.i [as click] (filename:linenumber)
    at HTMLTableRowElement.onmouseup (Workbox?ajax:1)
    at <anonymous>:1:45

In the accompanying js source file, in function i in given line number, event.metaKey is being checked:

    n = b.metaKey || b.ctrlKey

In this line, the error shows.

This event works when clicked by hand(mouse) myself. When I use the command to do the same, it is unable to run without error. Due to this 'metaKey' not passed to it correctly. Can I pass it along the onmouseup() call? Is there any other way? In the context of mouseEvents, what does metakey even refer to, anyway? On other questions, it was said the "Win" key is the metaKey. But when clicking manually, I don't press any other key, just the mouse. How does it work there?

My end goal here is to call the same function onmouseup on the same element but using selenium library in Java. There also I'm using JavaScript Executor on the element obtained using xpath. It is giving the same error there too. So if this works, it should work there also.

I have double checked that the same element is being selected and not some other. What can I do to solve the issue?


Solution

  • Like @teemu said in comment, what you are doing isn't an event trigger just a call to the function onmouseup(). The problem is this call doesn't have the event argument which is called b in your example so n = b.metaKey || b.ctrlKey is n = undefined.metakey || undefined.ctrlKey

    To create a mouseup event you use :

    newEvt = new MouseEvent("mouseup", {
        bubbles: true,
        cancelable: true,
        screenX: <your wanted X value>,
        screenY: <your wanted Y value>,
        clientX: <your wanted X value>,
        clientY: <your wanted Y value>
    });
    
    // screenX, screenY, clientX and clientY are optionals and default to 0
    
    document.getElementsByClassName("one")[0].dispatchEvent(newEvt);
    

    see MDN MouseEvent Documentation : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent


    about metakey they correspond to the windows key or the ⌘key on mac (source: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey)