某些可点击元素的未定义href

Question

我试图通过鼠标左键单击链接（可点击元素的URL），下一个方法不适用于所有元素：

function callback(e) {
    if (e.button != 0 ) {
        return;
    }
    alert(e.target.href);
}
document.addEventListener('click', callback, true);

例如，对于Youtube网站上的某些元素 - 标题或缩略图（所有这些元素都是可点击的，它们会导致某些视频/播放列表）：

href是undefined

但它是可点击的，Google Chrome浏览器会显示此元素所指向的链接预览：

更新

Youtube网站上的某些A标记包含其中的其他元素的问题：<a href="..."><span>...<span/><div.......></a>

我尝试了调试模式（inspect），选择了一些这样的元素进行检查，并在<span>内选择了<a>。

其他解决方案：https://jsfiddle.net/z2huqjjh/2/（如果链接（A标记）动态添加到网页，将是一个很好的解决方案）

Answer 1

默认情况下，事件会冒泡。这意味着您可以拥有一个嵌套在其他100个元素中的元素。单击该嵌套元素将导致click事件，并且该事件将向上传播通过所有祖先元素，直到它被取消或到达window。

现在，document中的所有内容都是可点击的。仅仅因为某些东西是可点击的并不意味着它会导航到一个URL，就像<a>元素那样。

例如：

＆＃13;

＆＃13;

document.querySelector("div").addEventListener("click", function(){
  alert("Thanks for clicking me!");
});

＆＃13;

<div>I'm a &lt;div&gt; and I don't have an 'href'. But, click me anyway</div>

＆＃13;

＆＃13;

＆＃13;

由于只有少数元素实际上具有href属性，因此您可以更改代码以仅查看这些属性：

＆＃13;

＆＃13;

function callback(e) {
  if (e.button != 0 ) {
    return;
  } 
  alert(e.currentTarget.href);
}

// Get all the anchors and place into an array
var anchorArray = Array.from(document.querySelectorAll("a"));

// Loop through the anchors
anchorArray.forEach(function(anchor){
  // Assign a click event handler to each. When the click event
  // bubbles to the element, the callback will be called
  anchor.addEventListener('click', callback);
});

＆＃13;

<div>I'm a div - click me anyway</div>
<a href="#"><span>I'm a span inside of an anchor, click me too!</span></a>

＆＃13;

＆＃13;

＆＃13;