CODEWITHSUNDEEP
javascriptjquery
stasdeep
stasdeep

Reputation: 3146

How to trigger mouseover with JavaScript?

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

Upvotes: 0

Views: 261

Answers (3)

stasdeep
stasdeep

Reputation: 3146

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

Upvotes: 0

StefanN
StefanN

Reputation: 911

Vanilla JavaScript solution: 

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

JQuery solution: 

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

Upvotes: 0

Devsi Odedra
Devsi Odedra

Reputation: 5322

use mouseenter 

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

Upvotes: 2

Related Questions