TA貢獻1804條經(jīng)驗 獲得超7個贊
在這里，因為我在 中調(diào)用了函數(shù)
<a href="#work" onclick='clickfunc(this)'>，所以我需要創(chuàng)建一個不必像這樣調(diào)用的函數(shù)。
聽起來您在問如何使用現(xiàn)代事件處理，這是個好主意。
你這樣做：
onclick從該標(biāo)簽中 刪除，并且：
添加在該元素創(chuàng)建后運行的腳本并為其連接一個處理程序；或者
添加掛鉤祖先元素的腳本，click然后在點擊冒泡到該祖先時檢查它是否通過該元素。（這稱為事件委托。）
這是＃1的示例：
<a href="#work">this is the #work element</a>
<a href="#life">this is something else</a>
<script>
document.querySelector("a[href='#work']").addEventListener("click", function() {
console.log(this.textContent || this.innerText);
});
</script>
請注意，必須在元素存在后評估該代碼。在現(xiàn)代瀏覽器上有幾種方法可以做到這一點：
將它放在script文檔末尾的標(biāo)簽中，就在結(jié)束</body>標(biāo)簽之前。這適用于現(xiàn)代和舊的和過時的瀏覽器。
或者將defer屬性放在script標(biāo)簽上（這假設(shè)您使用帶有 的外部腳本src；它不適用于內(nèi)聯(lián)腳本）。適用于現(xiàn)代瀏覽器。
或者將代碼包裝在DOMContentLoaded事件的處理程序中。適用于現(xiàn)代和舊版瀏覽器。
這是＃2（事件委托）的示例：
<script>
document.addEventListener("click", function(e) {
var a = e.target.closest("a[href='#work']");
if (a) {
// The event passed through the element on its way to the document
console.log(a.textContent || a.innerText);
}
});
</script>
<a href="#work">this is the #work element</a>
<a href="#life">this is something else</a>
該closest方法存在于現(xiàn)代和稍舊的瀏覽器上，但不存在于 IE11 上。如果需要使用兼容 IE11 的代碼：
document.addEventListener("click", function(e) {
var a = e.target;
while (a && a.nodeType === 1) {
if (a.tagName === "A" && a.getAttribute("href") === "#work") {
// The event passed through the element on its way to the document
console.log(a.textContent || a.innerText);
break;
}
a = a.parentNode;
}
});
在評論中你問：
我var a = e.target.closest("a[href]")可以引用所有具有 href 的標(biāo)簽嗎？
是的，就是這樣。e.target.closest("a[href]")將匹配具有從其祖先開始并向上移動的屬性的第一個a元素。只會對以 .開頭的元素執(zhí)行此操作。例如，下面是上面的示例，其中兩個元素記錄了它們的文本，而第三個元素不記錄，因為它不匹配：hrefe.targete.target.closest("a[href^='#']")ahref#href="#xyz"href="http://example.com"
<script>
document.addEventListener("click", function(e) {
var a = e.target.closest("a[href^='#']");
if (a) {
// The event passed through the element on its way to the document
console.log(a.textContent || a.innerText);
}
});
</script>
<div><a href="#work">this is the #work element</a></div>
<div><a href="#life">this is the #life element</a></div>
<div><a href="http://example.com">this is the http://example.com element</a></div>
TA貢獻1856條經(jīng)驗 獲得超5個贊
我已將代碼添加到腳本標(biāo)簽中，并將其放入頭標(biāo)簽中。因此，一旦加載了 dom，它將為所有具有 href 的標(biāo)簽附加一個點擊偵聽器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('a[href]').forEach(function (elms) {
elms.addEventListener('click', function (link) {
var t = link.innerText || link.textContent;
console.log(t);
});
});
});
</script>
</head>
<body>
<a href="#work">
<a href="#abc">
</body>
</html>
TA貢獻1942條經(jīng)驗 獲得超3個贊
我可以建議你需要像 global watcher 這樣的東西嗎？
document.addEventListener('click', watchAnchorClicks);
function watchAnchorClicks(event){
if (event.target.tagName === 'A'){
var anchor = event.target;
console.log('Click on anchor with text ' + anchor.innerText + ' and href ' + anchor.href);
}
}
<p>Paragraph with <a href="#anchor">anchor</a> in.</p>
<p>Yet another paragraph with other <a href="#another">other anchor</a> in.</p>
舉報