CODEWITHSUNDEEP
javascriptyui
danny
danny

Reputation:

Javascript: simulate a click on a link

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.

Upvotes: 5

Views: 15080

Answers (7)

Marco Altieri
Marco Altieri

Reputation: 3818

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

Upvotes: 0

TweeZz
TweeZz

Reputation: 4909

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?

Upvotes: 1

Crescent Fresh
Crescent Fresh

Reputation: 116998

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

Upvotes: 9

Eli Grey
Eli Grey

Reputation: 35905

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

Upvotes: 10

wombleton
wombleton

Reputation: 8376

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

Upvotes: -4

Vasil
Vasil

Reputation: 38136

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.

Upvotes: -1

Ilya Birman
Ilya Birman

Reputation: 10102

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

Upvotes: 3

Related Questions