Note: I want to hover the element not to trigger an event on hover. (a kind of automated hover using Javascript)

I want to react on Facebook post's ments on my wall randomly by running JS in chrome console.

For which I have written this line to test the 1st index in the list:

document.querySelectorAll('._6ijk a._6a-y')[0].click() 

When I hover over an element manually and use this code then It works, for which the selector is:

document.querySelector("[aria-label=Love]").click()

but before hovering there is no such element for "[aria-label=Love]"

But as all other reactions except like button appear on hovering on the like button which is running me into the trouble. Is there any good solution for tackling this scenario?

Note: I want to hover the element not to trigger an event on hover. (a kind of automated hover using Javascript)

I want to react on Facebook post's ments on my wall randomly by running JS in chrome console.

For which I have written this line to test the 1st index in the list:

document.querySelectorAll('._6ijk a._6a-y')[0].click() 

When I hover over an element manually and use this code then It works, for which the selector is:

document.querySelector("[aria-label=Love]").click()

but before hovering there is no such element for "[aria-label=Love]"

But as all other reactions except like button appear on hovering on the like button which is running me into the trouble. Is there any good solution for tackling this scenario?

• javascript

Share Improve this question Follow edited Jul 21, 2019 at 6:07 Henrik Andersson 47.3k1616 gold badges100100 silver badges9494 bronze badges asked Jul 21, 2019 at 5:57 GigaByteGigaByte 70077 silver badges2424 bronze badges 6

• The DOM element on facebook are dynamically created, when you hover at that time new element is added. – Rishab Commented Jul 21, 2019 at 6:01
• Yeah exactly, is there any solution or its not possible? – GigaByte Commented Jul 21, 2019 at 6:02
• Try to trigger mouseenter event on that element, it will create dynamic DOM – Rishab Commented Jul 21, 2019 at 6:05
• Did you try onmouseover ? – curious_nustian Commented Jul 21, 2019 at 6:08
• yeah I have tried but it didn't work – GigaByte Commented Jul 21, 2019 at 6:12

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

You first need to create an Event and then dispatch that on your required DOM element.

Here is how to create on mouseover event

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

Then add an eventListener to your element yourself.

yourelement = document.querySelector('css selector here');
yourelement.addEventListener('mouseover', function() {
      //something here
});

...and then finally dispatchEvent

yourelement.dispatchEvent(event);

I hope it works for whatever you're trying to achieve! Cheers!

Chrome developer tools -> console tab, type:

Locate the element e.g.

 var element = document.querySelectorAll('div.collapse.in.show .milestone-circle')[1]

Add event to the 'element'

 element.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}))