Javascript：模拟点击链接答案

【问题标题】：Javascript: simulate a click on a linkJavascript：模拟点击链接
【发布时间】：2014-08-31 07:49:35
【问题描述】：

我有一个附有监听器的链接（我正在使用 YUI）：

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

我希望在不涉及用户点击的另一个场景中实现相同的功能。理想情况下，我可以模拟元素上的“点击”并自动触发该功能。我怎么能这样做？太糟糕了，这不起作用：

$('Element').click()

谢谢。

【问题讨论】：

标签： javascript yui

【解决方案1】：

MDC有一个很好的example of using dispatchEvent来模拟点击事件。

下面是一些模拟点击元素的代码，它还检查是否取消了事件：

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

【讨论】：

这很好用，而且很容易实现。谢谢！
我必须有 YUI 才能执行此操作吗？
不，你不必使用 YUI 来使用它。

【解决方案2】：

您正在寻找fireEvent（IE）和dispatchEvent（其他）。

对于 YUI 3，这一切都很好地包含在 Y.Event.simulate() 中：

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

【讨论】：

【解决方案3】：

你可以单独声明你的函数。

function DoThisOnClick () {
}

然后像现在一样将其分配给 onclick 事件，例如：

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

你可以随时调用它:-)

DoThisOnClick ()

【讨论】：

True... 但是 YUI 事件处理程序可以访问变量，例如 'this' 和其他由 YUI 框架处理的参数。最好只触发相同的事件。
"this" 包含对您单击的对象的引用。如果您自己调用该函数，则没有这样的对象。所以你的函数需要处理它。尝试： if (this) // do smth; else // 当没有“this”时做某事

【解决方案4】：

如果有人遇到这种情况，正在寻找一种与框架无关的方式来触发任何 HTML 和鼠标事件，请看这里：How to simulate a mouse click using JavaScript?

【讨论】：

【解决方案5】：

1) 第一个解决方案

文章http://mattsnider.com/simulating-events-using-yui/描述了如何使用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;
    }
};

如您所见，该函数循环遍历节点及其父节点，并为每个节点获取侦听器列表并调用它们。

2) 第二个解决方案

还有另一种方法可以做到这一点。例如：

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

其中函数用作

3) 第三种解决方案

YUI2 2.9版本有更好的解决方案：http://yui.github.io/yui2/docs/yui_2.9.0_full/docs/YAHOO.util.UserAction.html

4) 第四解决方案

YUI3 还有一个更好更干净的解决方案：http://yuilibrary.com/yui/docs/event/simulate.html

【讨论】：

【解决方案6】：

当然 $('Element').click() 不会起作用，但是如果你包含 jquery 就可以了，它和 yui 一起工作得很好。

由于我未测试，您需要执行以下操作：

function myfunc(){
//functionality
}

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

然后在需要发生其他事情时调用 myfunc。

【讨论】：

【解决方案7】：

无法模拟用户点击任意元素是故意的，原因很明显。

【讨论】：