How can I simulate a click to an anchor tag

Question

I want to simulate a click to an anchor tag with all extras like correct target handling   There seems to be a   click    3   method for anchor s DOM object but not all browsers support that  Firefox throws this error      Error  anchorObj click is not a function   It also works strangely on Opera 10 and Konqueror  causing infinite clicks to happen when it s called inside onclick handler of a surrounding div  I guess only IE8 works fine with it  Anyway I don t want it since major browsers mostly have problems with it    I found this alternate solution for Firefox in Mozilla forums   var evt   document createEvent  MouseEvents     evt initMouseEvent  click   true  true  window       0  0  0  0  0  false  false  false  false  0  null    anchorObj dispatchEvent evt      This seems too ugly and cumbersome for me  I don t know how compatible it is and I want to avoid writing browser specific code as much as possible   I can t use location href   anchorObj href  because it doesn t handle  target  attribute  I can do some hard coding based on target s value but I d like to avoid that as well   There is suggestion of switching to JQuery but I m not sure how well it handles target property either since I haven t worked with it before

User · Answer

well  you can very quickly test the click dispatch via jQuery like so      link-id   click      If you re still having problem with click respecting the target  you can always do this      link-id   click  function  event  anchor       window open  anchor href  anchor target          event preventDefault      return false

User · Answer

Quoted from https   developer mozilla org en DOM element click  The click method is intended to be used with INPUT elements of type button  checkbox  radio  reset or submit  Gecko does not implement the click method on other elements that might be expected to respond to mouse   clicks such as links  A elements   nor will it necessarily fire the click event of other elements  Non   Gecko DOMs may behave differently   Unfortunately it sounds like you have already discovered the best solution to your problem  As a side note  I agree that your solution seems less than ideal  but if you encapsulate the functionality inside a method  much like JQuery would do  it is not so bad

User · Answer

There is a simpler way to achieve it   HTML     lt a href  https   getbootstrap com   id  fooLinkID  target   blank  gt Bootstrap is life   lt  a gt    JavaScript       Simulating click after 3 seconds setTimeout function      document getElementById  fooLinkID   click       3   1000     Using plain javascript to simulate a click along with addressing the target property   You can check working example here on jsFiddle

User · Answer

Here is a complete test case that simulates the click event  calls all handlers attached  however they have been attached   maintains the  target  attribute   srcElement  in IE   bubbles like a normal event would  and emulates IE s recursion-prevention  Tested in FF 2  Chrome 2 0  Opera 9 10 and of course IE  6     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt script gt  function fakeClick event  anchorObj      if  anchorObj click        anchorObj click       else if document createEvent        if event target     anchorObj          var evt   document createEvent  MouseEvents           evt initMouseEvent  click   true  true  window             0  0  0  0  0  false  false  false  false  0  null          var allowDefault   anchorObj dispatchEvent evt            you can check allowDefault for false to see if          any handler called evt preventDefault             Firefox will  not  redirect to anchorObj href          for you  However every other browser will               lt  script gt   lt  head gt   lt body gt    lt div onclick  alert  Container clicked    gt     lt a id  link  href     onclick  alert  event target    event srcElement  innerHTML   gt Normal link lt  a gt   lt  div gt    lt button type  button  onclick  fakeClick event  document getElementById  link     gt    Fake Click on Normal Link  lt  button gt    lt br   gt  lt br   gt    lt div onclick  alert  Container clicked    gt       lt div onclick  fakeClick event  this getElementsByTagName  a   0    gt  lt a id  link2  href     onclick  alert  foo    gt Embedded Link lt  a gt  lt  div gt   lt  div gt    lt button type  button  onclick  fakeClick event  document getElementById  link2     gt Fake Click on Embedded Link lt  button gt    lt  body gt   lt  html gt    Demo here   It avoids recursion in non-IE browsers by inspecting the event object that is initiating the simulated click  by inspecting the target attribute of the event  which remains unchanged during propagation    Obviously IE does this internally holding a reference to its global event object  DOM level 2 defines no such global variable  so for that reason the simulator must pass in its local copy of event

User · Answer

None of the above solutions address the generic intention of the original request  What if we don t know the id of the anchor  What if it doesn t have an id  What if it doesn t even have an href parameter  e g  prev next icon in a carousel   What if we want to apply the action to multiple anchors with different models in an agnostic fashion  Here s an example that does something instead of a click  then later simulates the click  for any anchor or other tag    var clicker   null     a   click function e        clicker   this      capture the clicked dom object            do something            e preventDefault       prevent original click action     clicker 0  click       this repeats the original click   0  is necessary

[javascript] How can I simulate a click to an anchor tag?

Examples related to javascript

Examples related to html

Examples related to dom