0

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?

kboul
  • 13,836
  • 5
  • 42
  • 53
Gaurav Kumar
  • 221
  • 3
  • 14
  • That's not exactly an event trigger, you're just calling the event handler function. – Teemu Jul 31 '18 at 09:37
  • Okay, so what should I do? I am a newbie in this area. Also, Trigger and calling doesn't mean the same then? – Gaurav Kumar Jul 31 '18 at 09:38
  • Use [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to attach the event, and [dispatchEvent](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent) to trigger an event. – Teemu Jul 31 '18 at 09:40

3 Answers3

3

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)

jonatjano
  • 3,576
  • 1
  • 15
  • 20
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);
Programmer
  • 1,973
  • 1
  • 12
  • 20
  • but when I use mouse to click, I'm not pressing any key (Enter or Win) so why do I need to assign some value to metaKey here? – Gaurav Kumar Jul 31 '18 at 10:09
  • My mistake. You don't need the set the metaKey. Your error was because the event element was undefined, not because the metaKey didn't have a value. – Programmer Jul 31 '18 at 10:14
  • Thanks a lot, your and jonatjano answer collectively helped solve the problem. – Gaurav Kumar Jul 31 '18 at 10:23
0

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>
Rohit Guleria
  • 72
  • 1
  • 12