Simulating a mousedown, click, mouseup sequence in Tampermonkey?

JavascriptMouseeventGreasemonkeyUserscriptsTampermonkey

Javascript 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:


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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser3699068View Question on Stackoverflow
Solution 1 - JavascriptBrock AdamsView Answer on Stackoverflow
Solution 2 - JavascriptSNagView Answer on Stackoverflow
Solution 3 - JavascriptNaveen rajView Answer on Stackoverflow