How to simulate a click with JavaScript

Question

I m just wondering how I can use JavaScript to simulate a click on an element   Currently I have     lt script type  text javascript  gt  function simulateClick control        if  document all                control click              else               var evObj   document createEvent  MouseEvents            evObj initMouseEvent  click   true  true  window  1  12  345  7  220  false  false  true  false  0  null            control dispatchEvent evObj            lt  script gt    lt a href  http   www google com  id  mytest1  gt test 1 lt  a gt  lt br gt    lt script type  text javascript  gt      simulateClick document getElementById  mytest1      lt  script gt    But it s not working     Any ideas

User · Answer

document getElementById  elementId   dispatchEvent new MouseEvent  click   bubbles  true  cancellable  true       Follow this link to know about the mouse events using Javascript and browser compatibility for the same  https   developer mozilla org en-US docs Web API MouseEvent Browser compatibility

User · Answer

The top answer is the best  However  it was not triggering mouse events for me in Firefox when etype    click    So  I changed the document createEvent to  MouseEvents  and that fixed the problem  The extra code is to test whether or not another bit of code was interfering with the event  and if it was cancelled I would log that to console   function eventFire el  etype     if  el fireEvent        el fireEvent  on    etype       else       var evObj   document createEvent  MouseEvents        evObj initEvent etype  true  false       var canceled    el dispatchEvent evObj       if  canceled             A handler called preventDefault        console log  automatic click canceled          else            None of the handlers called preventDefault

User · Answer

This isn t very well documented  but we can trigger any kinds of events very simply  This example will trigger 50 double click on the button   x000D   x000D  let theclick   new Event  dblclick    for  let i   0 i  lt  50 i       action dispatchEvent theclick     x000D   lt button id  action  ondblclick  out innerHTML   Wtf    gt TEST lt  button gt   lt div id  out  gt  lt  div gt  x000D   x000D   x000D    The Event interface represents an event which takes place in the DOM  An event can be triggered by the user action e g  clicking the mouse button or tapping keyboard  or generated by APIs to represent the progress of an asynchronous task  It can also be triggered programmatically  such as by calling the HTMLElement click   method of an element  or by defining the event  then sending it to a specified target using EventTarget dispatchEvent    https   developer mozilla org en-US docs Web API Event  https   developer mozilla org en-US docs Web API Event Event

User · Answer

You could save yourself a bunch of space by using jQuery  You only need to use       myElement   trigger  click

User · Answer

var elem   document getElementById  mytest1        Simulate clicking on the specified element  triggerEvent  elem   click             Trigger the specified event on the specified element      param   Object  elem  the target element      param   String  event the type of the event  e g   click        function triggerEvent  elem  event       var clickEvent   new Event  event       Create the event    elem dispatchEvent  clickEvent          Dispatch the event      Reference   https   developer mozilla org en-US docs Web Guide Events Creating and triggering events https   codepen io felquis pen damDA

User · Answer

const Discord   require  quot discord js quot    const superagent   require  quot superagent quot     module exports         name   quot hug quot       category   quot action quot       description   quot hug a user  quot       usage   quot hug  lt user gt  quot       run  async  client  message  args    gt        let hugUser   message mentions users first        if  hugUser  return message channel send  quot You forgot to mention somebody  quot        let hugEmbed2   new Discord MessageEmbed        setColor  quot  36393F quot        setDescription      message author username    hugged   himself          setImage  quot https   i kym-cdn com photos images original 000 859 605 3e7 gif quot         setFooter     Yuki V5 3 1    quot https   cdn discordapp com avatars 489219428358160385 19ad8d8c2fefd03fa0e1a2e49a2915c4 png quot     if  hugUser id     message author id  return message channel send hugEmbed2       const  body    await superagent      get  https   nekos life api v2 img hug         let hugEmbed   new Discord MessageEmbed        setDescription      message author username    hugged     message mentions users first   username           setImage body url       setColor  quot  36393F quot         setFooter     Yuki V5 3 1    quot https   cdn discordapp com avatars 489219428358160385 19ad8d8c2fefd03fa0e1a2e49a2915c4 png quot       message channel send hugEmbed

User · Answer

Here s what I cooked up  It s pretty simple  but it works   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           Usage   eventFire document getElementById  mytest1     click

User · Answer

What about something simple like   document getElementById  elementID   click      Supported even by IE

User · Answer

document getElementById  quot  elment quot   click    Simply select the element from the DOM  The node has a click function  which you can call

User · Answer

Have you considered using jQuery to avoid all the browser detection   With jQuery  it would be as simple as       mytest1   click

[javascript] How to simulate a click with JavaScript?

Examples related to javascript