ansaurus

Question

How can I simulate a click to an anchor tag?

Answer 1

+3 A:

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;
});

Peter Bailey 2009-09-14 14:04:22

I'm not sure if window.open() uses an existing FRAME if it already exists. I may have target references to other frames as well. Guilty as charged for sticking to frames today :)

ssg 2009-09-14 14:25:31

It's trivial to test. You can make a test page in a few minutes and then you'll know.

Peter Bailey 2009-09-14 14:42:54

I tested it, it didn't work. It opens a new window on every click.

ssg 2009-09-15 09:22:25

Answer 2

+3 A:

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.

Chris Shouts 2009-09-14 14:05:38

Answer 3

+8 A:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<script>
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.
    }
  }
}
</script>
</head>
<body>

<div onclick="alert('Container clicked')">
  <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link'))">
  Fake Click on Normal Link
</button>

<br /><br />

<div onclick="alert('Container clicked')">
    <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button>

</body>
</html>

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.

Crescent Fresh 2009-09-14 14:37:00

This doesn't address the problem with Opera 10 and Konqueror:<div onclick="fakeClick(this.childNodes[0])"><a target="_blank">test</a>some text that can also be clicked</div>This code causes hundreds of windows to be opened with a single click.

ssg 2009-09-14 16:21:14

Although there is no complete answer, I select this as the correct answer since it's the closest.

ssg 2009-10-01 18:21:57

Crap, I had more research that I did for this at jsbin.com but I've lost the url (to address your comment of Sep 14th). I'll try to recreate. I take it you're still having this issue?

Crescent Fresh 2009-10-01 19:41:58

@ssg: see my update.

Crescent Fresh 2009-12-03 16:06:33

ansaurus

tags:

views:

answers:

How can I simulate a click to an anchor tag?

related questions