JavaScript Ninja - Emulate A Click

Posted at


Nothing can really emulate a click,
Your browser is C/C++ beauty that has no-trouble finding out if a "click" has come from the user or some-fake JavaScript code..
And Always remember: JavaScript is ONLY a SCRIPT-language, play nice with others!



Option #1.. new and preferred (angular seems to dislike it..)
function emu_click_new(target){
if("object" !== typeof target) return;
target.dispatchEvent(
new MouseEvent("click", { screenX: 0 /*MouseEvent [https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent] */
, screenY: 0
, clientX: 0
, clientY: 0
, ctrlKey: false
, shiftKey: false
, altKey: false
, metaKey: false
, button: 0 /*left button */
, buttons: 0 /*no sticky press */
, view: self /*UIEventInit [https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/UIEvent] */
, bubbles: true /*EventInit [https://developer.mozilla.org/en-US/docs/Web/API/Event/Event] */
, cancelable: true
, scoped: false
, composed: false
}
)
);
}



minified:
function emu_click(target){"object"===typeof target&&"function"===typeof target.dispatchEvent&&target.dispatchEvent(new MouseEvent("click",{screenX:0,screenY:0,clientX:0,clientY:0,ctrlKey:false,shiftKey:false,altKey:false,metaKey:false,button:0,buttons:0,view:self,bubbles:true,cancelable:true,scoped:false,composed:false}))};





not really old school, but yeah, old school..
function emu_click_old(target){
if("object" !== typeof target) return;
ev = self.document.createEvent("MouseEvents");
ev.initMouseEvent( /*https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent */
/* type (click|mousedown|mouseup|mouseover|mousemove|mouseout) */ "click"
, /* can bubble? (Sets the value of Event.bubbles) */ true
, /* can be canceled? (Sets the value of Event.cancelable) */ true
, /* view (Sets the value of UIEvent.view) */ self
, /* detail (UIEvent.detail: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail */ 0
, /* screenX (Sets the value of MouseEvent.screenX) */ 0
, /* screenX (Sets the value of MouseEvent.screenY) */ 0
, /* clientX (Sets the value of MouseEvent.clientX) */ 0
, /* clientY (Sets the value of MouseEvent.clientY) */ 0
, /* ctrlKey (Sets the value of MouseEvent.ctrlKey) */ false
, /* altKey (Sets the value of MouseEvent.altKey) */ false
, /* shiftKey (Sets the value of MouseEvent.shiftKey) */ false
, /* metaKey (Sets the value of MouseEvent.metaKey) */ false
, /* button (0 left, 1 middle, 2 right, 3 browser back, 4 browser forward) */ 0
, /* relatedTarget (always null) https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget */ null
);
target.dispatchEvent(ev);
}


quite old (IE and Mozilla 1.0....) :|
function emu_click_geezer(target){
if("object" !== typeof target) return;
var ev = document.createEventObject();
ev.button = 1;
target.fireEvent("on" + "click", event);
target.fireEvent("click");
}


and you can always launch the handler, as a fallback.

put it all together.. (although you really shouldn't..)
and let's use the old/geezer/callback combo (leaving the newest along for now... since you can just use it as is..)

var target = document.querySelector("body"); /* for example...*/

if("function" === typeof target.dispatchEvent)
emu_click_old(target);
else if("object" === typeof target.fireEvent)
emu_click_geezer(target);
else
(null !== target) && target[ "click" ]();