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

Question

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?

Answer 1

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)

Answer 2

This way you can bind an event with the data you need (to fix the error, or for any other reason) -

var e = new Event('mouseup');
document.getElementsByClassName("one")[0].trigger(e);

Answer 3

onmouseover and onmouseout

---

< tr class="one" style="height:20px;" onmouseover ="click('first value','2nd value')"> Text </tr>

---

and for onmousedown="mouseDown()" onmouseup="mouseUp()"

here is the example

function mouseDown() {
    document.getElementById("myP").style.color = "red";
}

function mouseUp() {
    document.getElementById("myP").style.color = "green";
}

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text to green.
</p>

<script>
function mouseDown() {
    document.getElementById("myP").style.color = "red";
}

function mouseUp() {
    document.getElementById("myP").style.color = "green";
}
</script>