如何使用Javascript检测链接点击（文本、图像等）？
我正在尝试编写一个跨浏览器脚本，用于检测何时在页面上单击了链接（文本链接、图像或其他链接），以便显示消息或广告（如间隙），然后将访问者引导到最初单击的目标url 脚本必须在第三方网站上运行（所有者在其网站上安装脚本标签） 如何使用javascript实现这一点 我是否使用事件侦听器？我是否遍历所有链接对象？ 还是别的什么 我的javascript技能是新手/中级，因此非常感谢详细的示例/解释 我已经开始在这里使用事件侦听器，但到目前为止，我检测到页面上的所有单击： <>我会考虑一个jQuery备选方案，但是我不知道如果网站没有jQuery库，它会在第三方网站上工作。如何使用Javascript检测链接点击（文本、图像等）？,javascript,jquery,cross-browser,event-listener,Javascript,Jquery,Cross Browser,Event Listener,我正在尝试编写一个跨浏览器脚本，用于检测何时在页面上单击了链接（文本链接、图像或其他链接），以便显示消息或广告（如间隙），然后将访问者引导到最初单击的目标url 脚本必须在第三方网站上运行（所有者在其网站上安装脚本标签） 如何使用javascript实现这一点 我是否使用事件侦听器？我是否遍历所有链接对象？ 还是别的什么 我的javascript技能是新手/中级，因此非常感谢详细的示例/解释 我已经开始在这里使用事件侦听器，但到目前为止，我检测到页面上的所有单击： 我会考虑一个jQuery备选
谢谢大家。要在单击或未单击动态添加的链接时调用函数，请使用 如果您使用的是较旧版本的jQuery，那么您将使用（注意选择器和事件类型的顺序是切换的）
我使用这种方式，它只会影响a标签中的链接
(function($){
$("a[href!='']").each(function(){
$(this).click(function(){
var href = $(this).attr("href")
})
});
})(jQuery);
if(typeof(jQuery) == undefined){
var head = docuent.getElementsByTagName('head')[0];
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://yourserver.url/jquery.js");
head.appendChild(script);
}
以下是不使用jQuery的大致操作方法：
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var observed = document.getElementsByTagName('a');
for (var i = 0; i < observed.length; i++) {
observed[i].addEventListener('click', function (e) {
var e=window.event||e;
alert('Clicked ' + e.srcElement.innerText);
if (e.preventDefault) { e.preventDefault() } else { e.returnValue=false }
}, false);
}
}
</script>
</head>
<body>
<a href="">foo</a>
<a href="">bar</a>
</body>
</html>
window.onload=函数（）{
观察到的var=document.getElementsByTagName（'a'）；
对于（变量i=0；i.谢谢，我不知道这是一个函数+1我收回它--现在我必须更改所有的live（）调用，因为它现在已不推荐使用。该死的@奥利弗-哈！我曾经津津有味地使用live，但不知道它被弃用了。老实说，live的唯一缺点是，它在调用时会遍历dom，并包装它找到的所有链接（或其他链接），并连接事件。通过委托和打开，可以避免初始处理时间。除非你有一个疯狂复杂的页面，否则可能不会有什么不同。别管它了：）花一天时间回答问题会让你成为更好的程序员的另一个原因@一个小时——完全是。我已经学会了用reams和reams回答关于SO的问题。+1-真的很酷，但是为什么
var tag=[]而不是var tag={}？将动态属性放在数组上不是很糟糕吗？对于IE，如果事件上没有“target”属性，您可能想检查e.srcmelement
。@AdamRackis，可能是，但在您的评论之前我不知道这一点（我有点意外地学会了JavaScript，通过jQuery…所以我可以使用它（很高兴！），但不一定是“好的”）。@Pointy，这样就变成了：var target=e.target | | e.src元素？我不需要玩IE（我只是一个业余爱好者，所以…耸耸肩）来为自己找到答案，可悲的是=/你最终可能要处理的一件事是，一些网站将有自己的链接点击处理程序，并且很难/不可能确保首先调用你的处理程序。@Pointy-这是一个很好的观点。。。甚至没有考虑到这一点。我只需要向任何使用我的代码的人指出典型的警告和免责声明。Martin，第二部分是一段很好的代码。仅供将来参考-在附加脚本标记后，页面是否需要重新加载才能运行脚本的其余部分？是和否包含该代码的脚本标记完成后，页面不需要重新加载它将加载（下载）您的jQuery文件编辑被拒绝的原因是当此帖子被回复时，许多浏览器不支持文档。head
请参阅以获取兼容性支持
if(typeof(jQuery) == undefined){
var head = docuent.getElementsByTagName('head')[0];
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://yourserver.url/jquery.js");
head.appendChild(script);
}
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var observed = document.getElementsByTagName('a');
for (var i = 0; i < observed.length; i++) {
observed[i].addEventListener('click', function (e) {
var e=window.event||e;
alert('Clicked ' + e.srcElement.innerText);
if (e.preventDefault) { e.preventDefault() } else { e.returnValue=false }
}, false);
}
}
</script>
</head>
<body>
<a href="">foo</a>
<a href="">bar</a>
</body>
</html>
function clickOrigin(e){
var target = e.target;
var tag = [];
tag.tagType = target.tagName.toLowerCase();
tag.tagClass = target.className.split(' ');
tag.id = target.id;
tag.parent = target.parentNode;
return tag;
}
var tagsToIdentify = ['img','a'];
document.body.onclick = function(e){
elem = clickOrigin(e);
for (i=0;i<tagsToIdentify.length;i++){
if (elem.tagType == tagsToIdentify[i]){
console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).');
return false; // or do something else.
}
}
};
function clickOrigin(e){
var target = e.target;
var tag = [];
tag.tagType = target.tagName.toLowerCase();
tag.tagClass = target.className.split(' ');
tag.id = target.id;
tag.parent = target.parentNode.tagName.toLowerCase();
return tag;
}
var tagsToIdentify = ['img','a'];
document.body.onclick = function(e){
elem = clickOrigin(e);
for (i=0;i<tagsToIdentify.length;i++){
if (elem.tagType == tagsToIdentify[i] && elem.parent == 'a'){
console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case and one inside an "a" element, no less!).');
return false; // or do something else.
}
else if (elem.tagType == tagsToIdentify[i]){
console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).');
return false; // or do something else.
}
}
};