Simulating a mousedown, click, mouseup sequence in Tampermonkey?
JavascriptMouseeventGreasemonkeyUserscriptsTampermonkeyJavascript Problem Overview
I would like to simulate a whole click not just
document.getElementsByClassName()[0].click();
How do I do that? Search results all seem to be about handling such events, not triggering them.
Javascript Solutions
Solution 1 - Javascript
Send mouse events. Like so:
//--- Get the first link that has "stackoverflow" in its URL.
var targetNode = document.querySelector ("a[href*='stackoverflow']");
if (targetNode) {
//--- Simulate a natural mouse-click sequence.
triggerMouseEvent (targetNode, "mouseover");
triggerMouseEvent (targetNode, "mousedown");
triggerMouseEvent (targetNode, "mouseup");
triggerMouseEvent (targetNode, "click");
}
else
console.log ("*** Target node not found!");
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}
That works if the web page is statically loaded. If the web page is AJAX-driven, use a technique as in:
- https://stackoverflow.com/questions/15511381/normal-button-clicking-approaches-are-not-working-in-greasemonkey-script
- https://stackoverflow.com/questions/15048223/choosing-and-activating-the-right-controls-on-an-ajax-driven-site
Beware:
The question code has an error. You need to pass a class name to that function. Like so:
document.getElementsByClassName ("SomeClassName")[0].click();
Solution 2 - Javascript
I improved Brock's code a little after it worked as expected for me.
Definition:
function simulateMouseClick(targetNode) {
function triggerMouseEvent(targetNode, eventType) {
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent(eventType, true, true);
targetNode.dispatchEvent(clickEvent);
}
["mouseover", "mousedown", "mouseup", "click"].forEach(function(eventType) {
triggerMouseEvent(targetNode, eventType);
});
}
Calling examples:
simulateMouseClick(document);
simulateMouseClick(document.querySelector("a[href*='stackoverflow']"));
Solution 3 - Javascript
Bit Optimized
function fireMouseEvents( query, eventNames ){
var element = document.querySelector(query);
if(element && eventNames && eventNames.length){
for(var index in eventNames){
var eventName = eventNames[index];
if(element.fireEvent ){
element.fireEvent( 'on' + eventName );
} else {
var eventObject = document.createEvent( 'MouseEvents' );
eventObject.initEvent( eventName, true, false );
element.dispatchEvent(eventObject);
}
}
}
}
You would fire like this
fireMouseEvents("a[href*='stackoverflow']",['mouseover','mousedown','mouseup','click']);