Question

我想在我的firefox扩展中检测是否已点击链接。到目前为止，为此我向窗口添加了一个click事件监听器

  window.addEventListener("click", function(event) { handleWindowClick(event); }, false);

  ...

  handleWindowClick : function(event)  {
    if ("event.target is a link") {
      // do something
    }
  };

对于某些链接，event.target是简单的URL。但是，对于某些链接，例如，将HTMLSpanElement作为event.target。我是在正确的轨道上捕捉链接点击还是有其他方式？如果它以这种方式工作，如果event.targer是链接，我如何确保成功测试？

Answer 1

您正在向主窗口添加一个事件监听器，用于注册任何点击。您遇到问题的网址必须包含在<span>标记中。你需要的是event delegation

Answer 2

为什么不把click事件监听器放到锚点（<a>）？

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

for (i = 0; i < hrefs.length; i++) {
    hrefs[i].addEventListener(...)
    ...
}

或jQuery：

$('a').click(function () {
    ...
});

Answer 3

检查一下，我希望这就是你要找的。

window.addEventListener("click", function(event) {
    handleWindowClick(event);
}, false);

function handleWindowClick(event){
   var origEl = event.target || event.srcElement;
    if(origEl.tagName === 'A')
       alert("anchor link is clicked");
    else if(origEl.parentNode.tagName === 'A')
         alert("clicked inside anchor");
    else if(origEl.tagName === 'SPAN')
        alert("span  is clicked");
}

小提琴：http://jsfiddle.net/5zXkN/3/

Answer 4

我扩展了dku.rajkumar的答案，以支持“A”-tags中的任意构造。我只是走上树，直到我找到一个“A”或我在根（因此在这种情况下没有点击链接）。它似乎做了伎俩。感谢大家的帮助！

 window.addEventListener("click", function(event) { handleWindowClick(event); }, false);
 ...

 isLink : function(element) {
   if(element.tagName === 'A')
     return true;
   else 
     if (element.parentNode) 
       return this.isLink(element.parentNode)
     else
       return false;
 },

 handleWindowClick : function(event) {
   var element = event.target || event.srcElement;
   var isLink = this.isLink(element);
   if (isLink) 
     dump("A link has been clicked.\n");
 },

检测点击Firefox中的链接

4 个答案: