How to simulate a mouse click using JavaScript

Question

I know about the document form button click   method  However  I d like to know how to simulate the onclick event   I found this code somewhere here on Stack nbsp Overflow  but I don t know how to use it     function contextMenuClick         var element   button       var evt   element ownerDocument createEvent  MouseEvents         evt initMouseEvent  contextmenu   true  true           element ownerDocument defaultView  1  0  0  0  0  false           false  false  false  1  null        element dispatchEvent evt       How do I fire a mouse click event using JavaScript

User · Answer

JavaScript Code       this function is used to fire click event     function eventFire el  etype         if  el fireEvent            el fireEvent  on    etype           else           var evObj   document createEvent  Events            evObj initEvent etype  true  false           el dispatchEvent evObj                  function showPdf      eventFire document getElementById  picToClick     click        HTML Code   lt img id  picToClick  data-toggle  modal  data-target   pdfModal  src  img Adobe-icon png  ng-hide  1   1  gt     lt button onclick  showPdf    gt Click me lt  button gt

User · Answer

You can use elementFromPoint  document elementFromPoint x  y    supported in all browsers  https   caniuse com  feat element-from-point

User · Answer

Modified version to make it work without prototype js   function simulate element  eventName        var options   extend defaultOptions  arguments 2              var oEvent  eventType   null       for  var name in eventMatchers                if  eventMatchers name  test eventName     eventType   name  break               if   eventType          throw new SyntaxError  Only HTMLEvents and MouseEvents interfaces are supported         if  document createEvent                oEvent   document createEvent eventType           if  eventType     HTMLEvents                         oEvent initEvent eventName  options bubbles  options cancelable                     else                       oEvent initMouseEvent eventName  options bubbles  options cancelable  document defaultView              options button  options pointerX  options pointerY  options pointerX  options pointerY              options ctrlKey  options altKey  options shiftKey  options metaKey  options button  element                     element dispatchEvent oEvent             else               options clientX   options pointerX          options clientY   options pointerY          var evt   document createEventObject            oEvent   extend evt  options           element fireEvent  on    eventName  oEvent             return element     function extend destination  source        for  var property in source        destination property    source property       return destination     var eventMatchers          HTMLEvents        load unload abort error select change submit reset focus blur resize scroll          MouseEvents        click dblclick mouse   down up over move out       var defaultOptions         pointerX  0      pointerY  0      button  0      ctrlKey  false      altKey  false      shiftKey  false      metaKey  false      bubbles  true      cancelable  true     You can use it like this   simulate document getElementById  btn     click      Note that as a third parameter you can pass in  options   The options you don t specify are taken from the defaultOptions  see bottom of the script   So if you for example want to specify mouse coordinates you can do something like   simulate document getElementById  btn     click     pointerX  123  pointerY  321      You can use a similar approach to override other default options   Credits should go to kangax  Here s the original source  prototype js specific

User · Answer

Here s a pure JavaScript function which will simulate a click  or any mouse event  on a target element   function simulatedClick target  options       var event   target ownerDocument createEvent  MouseEvents          options   options              opts        These are the default values  set up for un-modified left clicks         type   click           canBubble  true          cancelable  true          view  target ownerDocument defaultView          detail  1          screenX  0    The coordinates within the entire page         screenY  0          clientX  0    The coordinates within the viewport         clientY  0          ctrlKey  false          altKey  false          shiftKey  false          metaKey  false    I  think   meta  is  Cmd Apple  on Mac  and  Windows key  on Win  Not sure  though          button  0    0   left  1   middle  2   right         relatedTarget  null                Merge the options with the defaults   for  var key in options        if  options hasOwnProperty key           opts key    options key                  Pass in the options   event initMouseEvent        opts type        opts canBubble        opts cancelable        opts view        opts detail        opts screenX        opts screenY        opts clientX        opts clientY        opts ctrlKey        opts altKey        opts shiftKey        opts metaKey        opts button        opts relatedTarget           Fire the event   target dispatchEvent event       Here s a working example  http   www spookandpuff com examples clickSimulation html  You can simulate a click on any element in the DOM  Something like simulatedClick document getElementById  yourButtonId    would work   You can pass in an object into options to override the defaults  to simulate which mouse button you want  whether Shift Alt Ctrl are held  etc  The options it accepts are based on the MouseEvents API   I ve tested in Firefox  Safari and Chrome  Internet nbsp Explorer might need special treatment  I m not sure

User · Answer

Based on Derek s answer  I verified that  document getElementById  testTarget      dispatchEvent new MouseEvent  click    shiftKey  true      works as expected even with key modifiers  And this is not a deprecated API  as far as I can see  You can verify on this page as well

User · Answer

From the Mozilla Developer Network  MDN  documentation  HTMLElement click   is what you re looking for  You can find out more events here

User · Answer

An easier and more standard way to simulate a mouse click would be directly using the event constructor to create an event and dispatch it      Though the MouseEvent initMouseEvent   method is kept for backward compatibility  creating of a MouseEvent object should be done using the MouseEvent   constructor    var evt   new MouseEvent  click         view  window      bubbles  true      cancelable  true      clientX  20         whatever properties you want to give it        targetElement dispatchEvent evt     Demo  http   jsfiddle net DerekL 932wyok6   This works on all modern browsers  For old browsers including IE   MouseEvent initMouseEvent will have to be used unfortunately though it s deprecated   var evt   document createEvent  MouseEvents    evt initMouseEvent  click   canBubble  cancelable  view                     detail  screenX  screenY  clientX  clientY                     ctrlKey  altKey  shiftKey  metaKey                     button  relatedTarget   targetElement dispatchEvent evt

[javascript] How to simulate a mouse click using JavaScript?

Examples related to javascript

Examples related to dom-events

Examples related to mouseclick-event