Is there any way to simulate onmouseover in Developer Tools?
Yes, as it is selected in your image you can use the dispatchEvent
method only you must previously create the event in the chrome console and execute it.
- pre-create :hover event
var event = new MouseEvent("mouseover");
- You send the event to the DOM element where
$0
is the element that you have selected in the debugger of your browser (in your case a div with the class facebox)
$0.dispatchEvent(event)
You can use dispatch to send / fire an event for an element: element.dispatchEvent(event);
. The support may vary on different browsers and versions; my demo on jsfiddle worked on chrome 65.
Given this html
<div id="menu">
<h3>Menu</h3>
<div>Sample to fire onmouseover using a script</div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<button onclick="simulateMouseOver()">simulate onMouseOver</button>
Below an onmouseover-event is set for <div id=menu>
. As soon as the mouse is moved over the div the event fires:
var menu = document.getElementById("menu");
menu.addEventListener("mouseover", function(event){
event.target.style.backgroundColor = "blue";
setTimeout(function() {
event.target.style.backgroundColor = "";
}, 500);
}, false)();
To raise the onmouseover-event from inside a script you
- first have to create the correct event
- an then fire / dispatch this event to the target-element
See this code
function simulateMouseOver() {
var listItems = document.querySelectorAll("ul li")
var item1 = listItems.item(1);
var event = new MouseEvent('mouseover',
{view: window, bubbles: true, cancelable: true});
var cancelled = !item1.dispatchEvent(event);
if (cancelled) {
// a handler called preventDefault.
} else {
// none of the handlers called preventDefault.
}
}
You can find out more at
- MDN dispatch event
- MDN event mouseover
The question simulate a mouse click from 2011 or Trigger events in javascript from 2010 may be of use regarding the support in older browsers.