javascript - 跟踪按钮 onclick 事件

Question

我有一个脚本，当链接位于 <a> 内时，可以跟踪传出链接。标签。

脚本来自 here

该脚本将跟踪标签或图像内的 html。

我需要的是它跟踪按钮，如下所示。

这是我想我需要修改的代码:

    function clicktracker(e)
{
var ie  = navigator.appName == "Microsoft Internet Explorer";
var src = ie ? window.event.srcElement : e.target;
var tag =  (src.tagName.toLowerCase() != "a") ? src.parentNode : src;

if (!tag || tag.tagName.toLowerCase() != "a") return;

domain    = clicktracker_domain   (tag.href);
extension = clicktracker_extension(tag.href);

if ( clicktracker_inarray(clicktracker_domains, domain) &&
    !clicktracker_inarray(clicktracker_extensions, extension)) return;

var url   = tag.href;
var title = '';

if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.innerHTML);
if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.title);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt(src.alt);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt("Image");
url   = escape(url  .substr(0, 150));
title = escape(title.substr(0, 150));

if (url && title) setTimeout("clicktracker_aux('"+url+"', '"+title+"')", 10);
return;
}

这是我要跟踪的按钮

<button type="button" title="title" style="background:#cda85c;" class="button btn-cart" onclick="window.open('http://www.example.com')"><span><span><?php echo $this->__('Buy Now') ?></span></span></button>

这是完整的脚本:

function clicktracker_inarray (arr, val)
{
for (var i in arr) if (arr[i] == val) return true;
return false;
}

// ***** clicktracker_innertxt *****

function clicktracker_innertxt(str)
{
str = str.replace(/<[^>]*>/g, ' ');
str = str.replace(  /&amp;/g, '&');
str = str.replace( /&nbsp;/g, ' ');
str = str.replace(   /^\s+/g,  '');
str = str.replace(   /\s+$/g,  '');
return str;
}


// ***** URL *******************************************************************

var clicktracker_re_scheme = "^\\w+://";
var clicktracker_re_folder = "((?:-|\\w|\\.)*)";
var clicktracker_re_domain = clicktracker_re_scheme+       clicktracker_re_folder;
var clicktracker_re_urlall = clicktracker_re_domain+"(?:/"+clicktracker_re_folder+')*';

// ***** clicktracker_domain *****

function clicktracker_domain(url)
{
var reg   = new RegExp(clicktracker_re_domain);
var match = reg.exec(url);
if (!match) return "";
match = match[match.length-1];
return match;
}

// ***** clicktracker_extension *****

function clicktracker_extension(url)
{
var reg   = new RegExp(clicktracker_re_urlall);
var match = reg.exec(url);
if (!match) return "";
match = match[match.length-1].split(".");
return (match.length >= 2) ? match[match.length-1] : "";
}


// ***** Track *****************************************************************

// ***** clicktracker_aux *****

function clicktracker_aux(url, title)
{
var img = new Image();
img.src = clicktracker_url+"?url="+url+"&title="+title+"&rand="+Math.random();
}

// ***** clicktracker *****

function clicktracker(e)
{
var ie  = navigator.appName == "Microsoft Internet Explorer";
var src = ie ? window.event.srcElement : e.target;
var tag =  (src.tagName.toLowerCase() != "a") ? src.parentNode : src;

if (!tag || tag.tagName.toLowerCase() != "a") return;

domain    = clicktracker_domain   (tag.href);
extension = clicktracker_extension(tag.href);

if ( clicktracker_inarray(clicktracker_domains, domain) &&
    !clicktracker_inarray(clicktracker_extensions, extension)) return;

var url   = tag.href;
var title = '';

if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.innerHTML);
if (!title) if (tag.tagName.toLowerCase() ==   "a") title = clicktracker_innertxt(tag.title);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt(src.alt);
if (!title) if (src.tagName.toLowerCase() == "img") title = clicktracker_innertxt("Image");
url   = escape(url  .substr(0, 150));
title = escape(title.substr(0, 150));

if (url && title) setTimeout("clicktracker_aux('"+url+"', '"+title+"')", 10);
return;
}


// ***** Attach Events *********************************************************

if (navigator.appName == "Microsoft Internet Explorer")
    document.attachEvent   ('onclick', clicktracker);
else document.addEventListener('click', clicktracker, false);

编辑*****

然后，点击次数将存储在数据库中，并从 php 页面调用。

Answer 1

这些脚本中发生了很多事情，并且不清楚您所说的“轨道”是什么意思，所以我只给出一个简短的版本:

document.addEventListener('click',function(e){
    var tag=e.target.tagName.toLowerCase();
    switch(tag){
        case "a":
            //use e.target to track this link event
            break;
        case "img":
            //use e.target to track this image event
            break;
        case "button":
            //use e.target to track this button event
            break;
    }
});

这会监听页面上任意位置的点击，然后您使用 e.target 来检查点击。

编辑:

e 只是我赋予事件对象的名称，它由事件监听器自动传递到函数中。该对象中始终存在的属性之一是 target，它包含有关事件的一堆信息。如果将 console.log(e) 放入上面事件监听器的函数内，您可以在 Chrome 中将其拉出，点击 control+shift+i， 转到javascript 控制台，并探索其中的内容。