[英]How do you make an anchor link inside tag non-clickable or disabled?
我有一个内置有<i>
标记的锚链接,因为我知道我们可以使用锚标记上的不同方法禁用/防止单击。 但是我的问题出现了,我们能否阻止仅对存在于锚标记内的<i>
进行点击。
<a href='#' id='someLink'>some text <i class="disable-pointer-event">External</i></a>
有什么线索吗? 任何帮助将不胜感激 !!
document.getElementById('someLink').onclick = e => {
if(e.path.map(p => p.tagName).includes('I'))
e.preventDefault();
/* OR
if(e.target.tagName === 'I')
e.preventDefault();
*/
}
您可以通过将javascript:void(0)
像这样传递到 href 来禁用链接
<a href="javascript:void(0)" id='someLink'>some text <i>External</i></a>
如果图标只是与链接相关的视觉线索,您可以将其从实际的 HTML 中删除,并将其作为伪元素添加到锚元素。
a { position: relative; } a::after { position: absolute; content: var(--icon); pointer-events: none; }
<a href='#' id='someLink' style="--icon: 'External';">some text</a>
您可以简单地从a
标签中取出i
元素,即使如果要使其不可点击的i
元素放置在中间,它可能需要您放置双a
元素。 这也不会影响代码的可读性和屏幕阅读器的可访问性,因为此实现的任何元素都不会违反它们自己的原则。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.