<a>單擊其中的按鈕時如何防止所有導航？</a> <a>例子：</a><a href="url1"></a> <a href="url2"><button>點擊</button></a>

Question

我的實際代碼中有一個約束，但是這個問題可能會幫助我解決我的問題，它與此類似。

我知道嵌入 2 個錨標記是個壞主意，但這是對我無法在實際項目中更改的代碼的限制，但我很高興學習一些方法來解決我提出的問題

我有一個anchor tag ，它是另一個anchor tag的父級，最后一個anchor tag有一個button 。 我希望當我專門單擊此按鈕時，阻止執行anchor tag的導航並執行按鈕的 function。

但如果您單擊button以外的任何其他元素，我希望導航正常進行。

我該怎么做？

 function clickedButton(event){ event.preventDefault(); console.log("click"); alert("click") }

 body,html{ margin:0px; padding:0px; } #mainLink{ border:1px solid red; } #secondaryLink{ border:1px solid blue; padding:20px; }

 <a href="www.google.com" id="mainLink"> go to google <a href="www.wikipedia.com" id="secondaryLink"> go to wikipedia <button onclick="clickedButton(event)">click</button> </a> </a>

Answer 1

<button onclick="clickedButton(event)">click</button>


<script>
clickedButton = function(e){
console.log("click");
[...] Any code you want
e.preventDefault();
</script>

" preventDefault() 方法取消事件，如果它是可取消的，這意味着屬於該事件的默認操作將不會發生。例如，這在以下情況下很有用：單擊“提交”按鈕，阻止它提交表格。點擊一個鏈接，防止鏈接跟隨 URL ” - w3school

Answer 2

這是一個骯臟的解決方案。

循環遍歷由錨點包裹的所有按鈕，並用添加了新 class 的按鈕替換錨點標簽。 並在正文中添加一個點擊處理程序，並使用該 class 查找對元素的點擊。

並通過 CSS 隱藏額外的最頂部錨點。

 document.addEventListener("click", function(e) { if (e.target.className.indexOf("btnClick") > -1) { console.log("clicked") } }); let linkBTNs = document.querySelectorAll("a > button"); linkBTNs.forEach(function(btn) { btn.className = "btnClick"; btn.parentNode.replaceWith(btn) });

 .btnClick { color: red; } html,body{height:100%;} #mainLink{display:none}

 <a href="www.google.com" id="mainLink"> go to google <a href="www.wikipedia.com" id="secondaryLink"> go to wikipedia <button>click</button> </a> </a>