How to trigger mouseover with JavaScript?

Question

I am trying to trigger a mouseover event on an element on this page: idealista.

If you open DevTools and put your mouse over one of the elements, it will send a /px/xhr/api/v2/collector request if your mouse was not in the viewport before. Payload of this request contains Base64 encoded information about the event:

[
    {
        "t": "PX297",
        "d": {
            "PX38": "mouseover",
            "PX70": 1631,
            "PX157": "true",
            "PX72": "#home-image",
            "PX34": "TypeError: Cannot read property '0' of null\n    at kt (https://www.idealista.com/px/client/main.min.js:2:13662)\n    at HTMLBodyElement.Wn (https://www.idealista.com/px/client/main.min.js:2:20855)",
            "PX78": 957,
            "PX79": 321,
            "PX850": 2,
            "PX851": 2392,
            "PX371": true,
            "PX96": "https://www.idealista.com/"
        }
    }
]

I can trigger click event (by $('#home-image').click()). But when I am trying to do that with mouseover or mouseenter, no result:

$('#home-image').click() // Sending request is triggered
$('#home-image').mouseover() // Sending request is NOT triggered
$('#home-image').mouseenter() // Sending request is NOT triggered

UPD:

None of these trigger the request:

for (let e of ['enter', 'over', 'move', 'leave', 'out']) {
    $('#home-image').trigger('mouse' + e);
}

Take a look at the Event handlers for Javascript. Without defining custom ones, there are a bunch which would be very handy for you to know. :) . Even i sometimes forget some of them. — Fallenreaper
– Fallenreaper, Commented Aug 9, 2019 at 0:01

Devsi Odedra · Accepted Answer · 2019-08-08 11:22:12Z

2

use mouseenter

$('#home-image').trigger('mouseenter');

answered Aug 8, 2019 at 11:22

Devsi Odedra

5,3421 gold badge25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

somsgod Over a year ago

I think he has asked for javascript specifically.

var home_image = document.getElementById('home-image'); home_image .addEventListener("mouseenter", function( event ) { do  stuff here })

remix23 Over a year ago

...But he's using jquery explicitely, and jquery is javascript in the first place.

stasdeep Over a year ago

Does it trigger sending request with info about an event?

Jon P Over a year ago

Also can be done with $('#home-image').mouseenter() (no parameters is intentional)

Jon P Over a year ago

@stasdeep , it will trigger the mouse enter event. The sending request is irrelevant. If the sending request is part of a mouse enter event handler for that element, it should be triggered.

|

StefanN · Accepted Answer · 2019-08-08 11:35:10Z

0

Vanilla JavaScript solution:

document.getElementById('home-image')
  .addEventListener('mouseenter', (e) => {
    // apply actions here
  });

JQuery solution:

$('#home-image').mouseenter(() => {
  // apply actions here
});

answered Aug 8, 2019 at 11:35

StefanN

9217 silver badges19 bronze badges

3 Comments

stasdeep Over a year ago

Does it trigger sending the request?

StefanN Over a year ago

You have to implement that yourself :)

stasdeep Over a year ago

I'm afraid you didn't understand what I need. I want to trigger it on a third-party page (link is in the answer). The problem is that .mouseover and .mouseenter triggers are not working with the listener set on the page.

stasdeep · Accepted Answer · 2019-08-09 05:42:18Z

0

The solution to this was to use a .dispatchEvent (thanks @JonP).

var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseover", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById('home-image').dispatchEvent(x);

answered Aug 9, 2019 at 5:42

stasdeep

3,2161 gold badge21 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to trigger mouseover with JavaScript?

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related