0

虽然我已经非常精通 jQuery，但不幸的是我的 Javascript 有点缺乏，在这种情况下我无法访问 jQuery，所以请不要回答“使用 jQuery”。

基本上，谷歌分析使我能够跟踪社交点击：

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

现在我想要跟踪每一个的点击并运行上面展示的谷歌分析代码。如果我使用 jQuery，我会做这样的事情：

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

但正如我所说，我无法访问 jQuery，那么我将如何使用通用 Javascript 来做到这一点？

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

4

2 回答 2

2

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

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

补充代码#1：

var n = document.querySelectorAll('a[track_social]');
for (var i = 0; i < n.length; i++)
    n[i].addEventListener('click', function(e) {
        _gaq.push(['_trackSocial',
            e.target.getAttribute('track_social'),
            'click', e.target.href]);  
    }, false);
于 2012-04-21T11:53:19.637 回答
0

你有选择：

您可以选择querySelectorAll()类似于 CSS（和 jQuery 选择器）的功能。它为您提供了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()某些浏览器不支持（螺丝 IE）。此外，IE 的版本addEventListener()是attachEvent()

于 2012-04-21T11:55:03.430 回答