查找最近的href屬性的最佳方法？

Question

為什么我不認為這是重復的。

嗯，我認為這與我要問的稍有不同。 我不想將監聽器添加到所有A標簽，而是在點擊事件的目標上減去href屬性（如果有）。

我正在嘗試“ Ajaxify”我的整個網站，以便當用戶單擊頁面中包含的任何鏈接時，腳本會將“ URL”或HREF屬性（所單擊元素的屬性）發送給Ajax函數，該函數將作為回報，呈現請求的內容（如單擊的鏈接所示）。

如果該元素是鏈接，則需要找到clicked元素的HREF屬性。 這里的問題是，A標記中可以包含許多元素（由於我的結構方式），而e.target.href不一定總是返回HREF屬性。

這是我到目前為止的內容：

function ajaxifyLinks(e) {
    var target = e.target;
    e.preventDefault();
    while(!target.href) {
        target = target.parentNode;
    }
    if(target.href) {
        ajaxLoad(target.href);
    }
}
document.body.addEventListener('click', ajaxifyLinks);

以下是我擁有的不同“可點擊”鏈接的示例：

<!-- Link -->
<a href="/cats">
   cats
</a>

<!-- Link -->
<a href="/hello">
   <span>
      <span> hi </span>
   </span>
</a>

<!-- Link -->
<a href="/bye">
   <span>
      bye
   </span>
</a>

如您所見，這就是為什么e.target.href並不總是返回HREF屬性的原因，因為您實際上是在單擊“鏈接”的span元素，但是，瀏覽器確實將您帶到了該鏈接。 為什么會這樣？ 我有什么辦法可以從這種行為中受益？ （例如，提取瀏覽器將帶您到的位置，即使您沒有單擊A標簽也是如此）。

我不喜歡我的解決方案，因為while循環有時會一直在不必要的情況下查找DOM樹（當e.target不是鏈接或包含在鏈接中時）。

謝謝。

Answer 1

如果單擊的元素沒有href，它將在其父級中搜索具有href的元素。 香草JS解決方案。

 function findUpTag(el, attr) { while (el.parentNode) { el = el.parentNode; if (el[attr]) { return el; } } return null; } document.body.onclick = function (event) { event.preventDefault(); var href = event.target.href; if (!href) { var closest = findUpTag(event.target, 'href'); if (closest) { href = closest.href; } } document.getElementById('output').innerHTML = 'element clicked: ' + event.target.nodeName + '<br>closest href: ' + href; }; 

 a, output { display: block; } 

 <!-- Link --> <a href="/cats"> cats </a> <!-- Link --> <a href="/hello"> <span> <span> hi </span> </span> </a> <!-- Link --> <a href="/bye"> <span> bye </span> </a> <output id="output"></output> 

Answer 2

新答案：

 <!-- Link --> <a href="/cats"> cats </a> <!-- Link --> <a href="/hello"> <span style="pointer-events: none;"> <span style="pointer-events: none;"> hi </span> </span> </a> <!-- Link --> <a href="/bye"> <span style="pointer-events: none;"> bye </span> </a> 

Answer 3

使用.parent() ，參考： http : .parent()

例如，您可以

 var hrefElem = $(target).parent('*[href]'); var link = hrefElem.attr('href'); 

Answer 4

只需將點擊處理程序附加到頁面上的每個鏈接即可：

function ajaxify(e)
{
    e.preventDefault();
    ajaxLoad(this.href);
}

[].forEach.call(document.getElementsByTagName('a'), function(el) {
    el.addEventListener('click', ajaxify.bind(el));
});

Answer 5

看看什么是事件冒泡和捕獲？ 了解事件如何通過DOM傳播。

捕獲錨鏈接並通過Ajax加載錨鏈接的技術稱為Hijax 。 因為您要替換頁面上的內容，所以不能簡單地設置一個事件來處理所有鏈接，並且您可能不想保持每次頁面加載時的重新綁定，所以您使用的方法很好，被稱為事件委托 。

上一篇文章恰好描述了您的問題（恰好在最后），還描述了與您的問題類似的解決方案，這實際上是解決此問題的最佳方法。 但是，您可以考慮使用微庫來簡化某些事件委托。 一個例子是gator.js 。