Question

虽然我已经非常精通jQuery，但遗憾的是我的Javascript有点缺乏，在这个实例中我没有访问jQuery，所以请不要“使用jQuery”答案。

Google Analytics（分析）基本上可以让我跟踪社交点击：

_gaq.push(['_trackSocial', 'facebook', 'like', 'http://domain.com/somepage']);

现在我的页面上有各种链接：

<a href="#myfacebook#" track_social="facebook"><img src="facebook_button" /></a>
<a href="#mytwitter#" track_social="twitter"><img src="twitter_button" /></a>
<a href="#mygoogleplus#" track_social="googleplus"><img src="googleplus_button" /></a>
<a href="#mypinterest#" track_social="pinterest"><img src="pinterest_button" /></a>

现在我想要跟踪每个点击次数并运行上面演示的Google Analytics代码。如果我使用jQuery，我会做这样的事情：

$('a[track_social]').click(function(){
    _gaq.push(['_trackSocial', $(this).attr('track_social'), 'click', $(this).attr('href')]);  
});

但正如我所说我无法访问jQuery所以我如何使用常规Javascript进行此操作？

它不一定要使用“track_social”属性，我可以放入其他内容，但它不能是每个单独的唯一ID，因为它们将在整个站点以多种方式出现并且多个在各种页面上的时间。

Answer 1

jQuery可以直接移植到本机DOM API：

Array.prototype.slice.call(
    document.querySelectorAll('a[track_social]')
).forEach(function(i) {
    i.addEventListener('click', function(e) {
        _gaq.push(['_trackSocial',
            e.target.getAttribute('track_social'),
            'click', e.target.href]);  
    }, false);
});

请注意，虽然此代码完全符合标准，但它需要{1.6} for forEach（大多数主流浏览器都支持，但仅限于IE 9+），并且需要addEventListener和{ {1}}（在大多数主流浏览器中都支持，但仅限于IE 8+）。如果您想要更广泛的浏览器支持，可以添加到此解决方案。

补充代码＃1：

querySelectorAll

Answer 2

你有选择：

你可以选择像{（和jQuery选择器）一样的querySelectorAll()。它为您提供了一个NodeList，它是一个类似于数组的被检索元素集合。

var links = document.querySelectorAll('a[track_social]');
//gives us [element,element,element...], loop and attach

for(var i; i<links.length;i++){
    links[i].addEventListener(...);
}

另一种方法是获取所有<a>代码并测试它们的属性

var links = document.getElementsByTagName('a');

for(var i; i<links.length;i++){
    if(links[i][yourAttribute]){
        links[i].addEventListener(...);
    }
}

但有一些警告。 querySelectorAll()是not supported by some browsers（螺丝IE）。另外，IE的addEventListener()版本为attachEvent()

使用基于属性的javascript选择HTML元素

2 个答案: