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.

回答1:

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

回答2:

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

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

回答4:

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?

回答5:

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

回答6:

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.

回答7:

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

来源：https://stackoverflow.com/questions/648928/javascript-simulate-a-click-on-a-link

标签

javascript

yui