MooTools：将事件附加到多个元素答案

【问题标题】：MooTools: Attaching event to multiple elementsMooTools：将事件附加到多个元素
【发布时间】：2011-04-09 21:45:54
【问题描述】：

我有一个需要转换为 MooTools 的 jQuery 例程，但我无法让它工作。这是我的 jQuery 版本：

$(".google-analytics-link").click(function () {
    var href = $(this).attr("href");
    pageTracker._link(href);
    location.href = href;
    return false;
});

这是我的 MooTools 翻译：

$$(".google-analytics-link").addEvent("click", function () {
    var href = this.get("href");
    pageTracker._link(href);
    location.href = href;
    return false;
});

但似乎不起作用。我不了解 MooTools 选择器。请帮忙？

【问题讨论】：

您的翻译没有问题。在 mootools 1.2.4+ 中，不推荐使用 $$ 以支持 document.getElements()，但我已经看到了一些 $$（这是 this.document.getElements 的别名）失败的实例。这是一个证明一切正常的jsfiddle：jsfiddle.net/dimitar/KGRFM。它更有可能工作但由于点击事件在跟踪发生之前导航而无法跟踪。在 moo 中，您倾向于通过将事件对象传递给回调 fn 来停止原始事件（在这种情况下，e 并应用 .stop(); 方法，而不是返回 false

标签： javascript jquery mootools css-selectors

【解决方案1】：

您不需要在单击链接时明确设置窗口的位置。目前，代码停止原生事件，调用pageTracker 对象上的方法，然后重定向到点击链接的位置。

_link 方法的 Google Analytics 文档说

此方法与 _setDomainName() 和 _setAllowLinker() 方法结合使用以启用跨域用户跟踪。 _link() 方法通过 URL 参数 (HTTP GET) 将 cookie 从该站点传递到另一个站点。 它还会更改 document.location 并将用户重定向到新 URL。

这意味着您只需停止点击事件，并调用 _link 方法来处理其余的事情。

var analyticsLinks = document.getElements('.google-analytics-link');

analyticsLinks.addEvent('click', function(event) {
    // stop the page from navigating away
    event.stop();
    var href = this.get('href');
    // let the Analytics API do its work, and then redirect to this link
    pageTracker._link(href);
});

【讨论】：

【解决方案2】：

$$(".google-analytics-link").each(function (e) { 
    e.addEvent("click", function () {
        var href = this.get("href");
        pageTracker._link(href);
        location.href = href;
        return false;
    });
});

【讨论】：

$$(selector).addEvent() 将自动遍历 $$ 返回的整个元素集合，从 1.1x(?) 开始是否如此 - 所以这可能不是它。