我有一個內置<i>標簽的錨鏈接，因為我知道我們可以在錨標簽上使用不同的方法禁用/阻止點擊。但是我的問題出現了，我們能否阻止僅存<i>在于錨標記內的點擊。
<a href='#' id='someLink'>some text <i class="disable-pointer-event">External</i></a>
有什么線索嗎？任何幫助將不勝感激 ！！
uj5u.com熱心網友回復：
document.getElementById('someLink').onclick = e => {
if(e.path.map(p => p.tagName).includes('I'))
e.preventDefault();
/* OR
if(e.target.tagName === 'I')
e.preventDefault();
*/
}
uj5u.com熱心網友回復：
您可以javascript:void(0)像這樣通過傳遞到 href來禁用鏈接
<a href="javascript:void(0)" id='someLink'>some text <i>External</i></a>
uj5u.com熱心網友回復：
如果圖示只是與鏈接相關的視覺線索，您可以將其從實際 HTML 中洗掉，并將其作為偽元素添加到錨元素。
a {
position: relative;
}
a::after {
position: absolute;
content: var(--icon);
pointer-events: none;
}<a href='#' id='someLink' style="--icon: 'External';">some text</a>uj5u.com熱心網友回復：
您可以簡單地將i元素從a標簽中取出，即使a如果i您想要使其不可點擊的元素放置在中間，它可能需要您放置雙元素。這也不會影響代碼可讀性和螢屏閱讀器的可訪問性，因為此實作的任何元素都沒有違反它們自己的原則。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<a href="#">Click on the sentences, instead of the icon </a>
<i class="fas fa-copy"></i>
<a href="#">to copy</a>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/395557.html
標籤：javascript html css 指针事件 标签
下一篇：axios未在Vuejs2中定義