如何使标记内的锚点 link 不可点击或禁用?
How do you make an anchor link inside tag non-clickable or disabled?
我有一个内置 <i>
标签的锚点 link,据我所知,我们可以 disable/prevent 使用不同的方法点击锚点标签。但是我的问题出现了,我们能否仅阻止锚标记内存在的 <i>
的点击。
<a href='#' id='someLink'>some text <i class="disable-pointer-event">External</i></a>
有线索吗?
任何帮助将不胜感激!!
您可以通过将 javascript:void(0)
传递到 href 来禁用 link
<a href="javascript:void(0)" id='someLink'>some text <i>External</i></a>
您可以简单地从 a
标签中获取 i
元素,即使它可能需要您放置双 a
元素,如果 i
元素你想让它不可点击放在中间。这也不会影响代码的可读性和屏幕的可访问性reader,因为此实现的任何元素都没有违反它们自己的原则。
<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>
document.getElementById('someLink').onclick = e => {
if(e.path.map(p => p.tagName).includes('I'))
e.preventDefault();
/* OR
if(e.target.tagName === 'I')
e.preventDefault();
*/
}
如果图标只是与 link 相关联的视觉线索,您可以将其从实际 HTML 中删除,并将其作为伪元素添加到定位元素。
a {
position: relative;
}
a::after {
position: absolute;
content: var(--icon);
pointer-events: none;
}
<a href='#' id='someLink' style="--icon: 'External';">some text</a>
我有一个内置 <i>
标签的锚点 link,据我所知,我们可以 disable/prevent 使用不同的方法点击锚点标签。但是我的问题出现了,我们能否仅阻止锚标记内存在的 <i>
的点击。
<a href='#' id='someLink'>some text <i class="disable-pointer-event">External</i></a>
有线索吗? 任何帮助将不胜感激!!
您可以通过将 javascript:void(0)
传递到 href 来禁用 link
<a href="javascript:void(0)" id='someLink'>some text <i>External</i></a>
您可以简单地从 a
标签中获取 i
元素,即使它可能需要您放置双 a
元素,如果 i
元素你想让它不可点击放在中间。这也不会影响代码的可读性和屏幕的可访问性reader,因为此实现的任何元素都没有违反它们自己的原则。
<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>
document.getElementById('someLink').onclick = e => {
if(e.path.map(p => p.tagName).includes('I'))
e.preventDefault();
/* OR
if(e.target.tagName === 'I')
e.preventDefault();
*/
}
如果图标只是与 link 相关联的视觉线索,您可以将其从实际 HTML 中删除,并将其作为伪元素添加到定位元素。
a {
position: relative;
}
a::after {
position: absolute;
content: var(--icon);
pointer-events: none;
}
<a href='#' id='someLink' style="--icon: 'External';">some text</a>