views:

2234

answers:

4

I want to simulate a click on any link on a page using JavaScript. If that link has some function binded to its 'onclick' event (by any other JS I don't have any control over), then that function must be called otherwise the link should behave in the normal manner and open a new page.

I am not sure that just checking the value of the 'onclick' handler would suffice. I want to build this so that it works on any link element.

I have no control over what function maybe binded to the onclick event of the link using whichever JS library (not necessarily jQuery) or by simply using JavaScript.

EDIT: With the help of the answers below, it looks like it is possible to check for event handlers attached using jQuery or using the onclick attribute. How do I check for event handlers attached using addEventListener / any other JS library so that it is foolproof?

+1  A: 

You can use the the click function to trigger the click event on the selected element.

Example:

$( 'selector for your link' ).click ();

You can learn about various selectors in jQuery's documentation.

EDIT: like the commenters below have said; this only works on events attached with jQuery, inline or in the style of "element.onclick". It does not work with addEventListener, and it will not follow the link if no event handlers are defined. You could solve this with something like this:

var linkEl = $( 'link selector' );
if ( linkEl.attr ( 'onclick' ) === undefined ) {
    document.location = linkEl.attr ( 'href' );
} else {
    linkEl.click ();
}

Don't know about addEventListener though.

Jan Hančič
See the comment to the above answer by Robert
ankit
That isn't true. It works on all events no matter how it was binded.
Jan Hančič
The click method triggers the onclick method of a link. It doesn't follow the url defined in the href attribute.
kgiannakakis
@Jan: That isn't true either. It works on the inline `onclick` handler, but otherwise only events bound with jQuery itself. If there were other events bound with `addEventListener` for example jQuery would miss those.
Crescent Fresh
@Crescent: you are right, sorry about that. But it works if you do something like: element.onclick = ...
Jan Hančič
So, I can check for the onclick handler and any jQuery bound functions. How do I check for any events assigned using addEventListener / any other JS library ( to make it foolproof )?
ankit
A: 

Easy! Just use jQuery's click function:

$("#theElement").click();
Robert Grant
From what I've read, doesn't jQuery's click() function only trigger those functions that have been bounded to the element's click event using jQuery? It doesn't work anyways.
ankit
@Ankit: it also triggers any inline event handler (ie `onclick="..."), but yes, otherwise you are correct.
Crescent Fresh
@Crescent Thanks, I didn't know that
ankit
Ah sorry, this was a harder question than I realised!
Robert Grant
A: 

At first see this question to see how you can find if a link has a jQuery handler assigned to it.

Next use:

$("a").attr("onclick")

to see if there is a javascript event assigned to it.

If any of the above is true, then call the click method. If not, get the link:

$("a").attr("href")

and follow it.

I am afraid I don't know what to do if addEventListener is used to add an event handler. If you are in charge of the full page source, use only jQuery event handlers.

kgiannakakis
True, but events bound with "other JS I don't have any control over" (as the OP mentions) such as `addEventListener` or `attachEvent` jQuery has no way to know about those: http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node/447106#447106
Crescent Fresh
It would have been so much easier if I was in charge of the page source. Unfortunately, I'm building this as a plugin and so it needs to be completely foolproof.
ankit
A: 

Just

$("#your_item").trigger("click");

using .trigger() you can simulate many type of events, just passing it as the parameter.

tanathos