Javascript: simulate a click on a link

Question

I have a link that has a listener attached to it (I'm using YUI):

YAHOO.util.Event.on(Element, 'click', function(){ /* some functionality */});

I would like to the same functionality to happen in another scenario that doesn't involve a user-click. Ideally I could just simulate "clicking" on the Element and have the functionality automatically fire. How could I do this? Too bad this doesn't work:

$('Element').click()

Thanks.

score 10 · Answer 1 · answered Mar 16 '09 at 04:21

10

MDC has a good example of using dispatchEvent to simulate click events.

Here is some code to simulate a click on an element that also checks if something canceled the event:

function simulateClick(elm) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var canceled = !elm.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    // uh-oh, did some XSS hack your site?
  } else {
    // None of the handlers called preventDefault
    // do stuff
  }
}

answered Mar 16 '09 at 04:21

Eli Grey

35,104
14
75
93

This works very well, and it's very easy to implement. Thanks ! – gramm Dec 14 '09 at 13:54
Do I have to have YUI to do this? – Colleen Kitchen Dec 12 '10 at 02:18
No, you don't have to use YUI to use this. – Eli Grey Dec 12 '10 at 19:20

Crescent Fresh · Answer 2 · 2009-03-16T13:24:08.970

9

You're looking for fireEvent (IE) and dispatchEvent (others).

For YUI 3 this is all wrapped up nicely in Y.Event.simulate():

YUI().use("node", function(Y) {
    Y.Event.simulate(document.body, "click", { shiftKey: true })
})

edited Mar 16 '09 at 13:24

answered Mar 16 '09 at 04:15

Crescent Fresh

115,249
25
154
140

score 3 · Answer 3 · answered Mar 16 '09 at 01:14

3

You can declare your function separately.

function DoThisOnClick () {
}

Then assign it to onclick event as you do right now, e.g.:

YAHOO.util.Event.on(Element, 'click', DoThisOnClick)

And you can call it whenever you want :-)

DoThisOnClick ()

answered Mar 16 '09 at 01:14

Ilya Birman

9,834
4
27
31

True... but the YUI Event handler has access to variables such as 'this' and other parameters handled by the YUI framework. It would be ideal to just fire the same event. – Mar 16 '09 at 01:19
"this" holds reference to the object which you clicked. If you call the function yourself, there’s no such object. So your function needs to deal with it. Try: if (this) // do smth; else // do smth when there’s no “this” – Ilya Birman Mar 16 '09 at 10:16

score 1 · Answer 4 · edited May 23 '17 at 10:27

1

In case anyone bumps into this looking for a framework agnostic way to fire any HTML and Mouse event, have a look here: How to simulate a mouse click using JavaScript?

edited May 23 '17 at 10:27

Community

1
1

answered May 27 '11 at 22:42

TweeZz

4,779
5
39
53

Marco Altieri · Answer 5 · 2014-08-30T23:49:35.743

1) FIRST SOLUTION

The article http://mattsnider.com/simulating-events-using-yui/ describes how to simulate a click using YAHOO:

var simulateClickEvent = function(elem) {
    var node = YAHOO.util.Dom.get(elem);

    while (node && window !== node) {
        var listeners = YAHOO.util.Event.getListeners(node, 'click');

        if (listeners && listeners.length) {
            listeners.batch(function(o) {
                o.fn.call(o.adjust ? o.scope : this, {target: node}, o.obj);
            });
        }

        node = node.parentNode;
    }
};

As you can see, the function loops over the node and its parents and for each of them gets the list of listeners and calls them.

2) SECOND SOLUTION

There is also another way to do it. For example:

var elem = YAHOO.util.Dom.get("id-of-the-element");
elem.fireEvent("click", {});

where function is used as

3) THIRD SOLUTION

Version 2.9 of YUI2 has a better solution: http://yui.github.io/yui2/docs/yui_2.9.0_full/docs/YAHOO.util.UserAction.html

4) FORTH SOLUTION

YUI3 has also a better and clean solution: http://yuilibrary.com/yui/docs/event/simulate.html

score -1 · Answer 6 · answered Mar 16 '09 at 01:15

Of course $('Element').click() won't work, but it can if you include jquery, it works well alongside yui.

As I untestand you need to do the following:

function myfunc(){
//functionality
}

YAHOO.util.Event.on(Element, 'click', myfunc);

Then call myfunc when something else needs to happen.

score -4 · Answer 7 · answered Mar 16 '09 at 01:49

-4

The inability to simulate a user-click on an arbitrary element is intentional, and for obvious reasons.

answered Mar 16 '09 at 01:49

wombleton

8,336
1
28
30

Javascript: simulate a click on a link

7 Answers7

Linked