0

我有一个内置<i>标签的锚链接，因为我知道我们可以在锚标签上使用不同的方法禁用/防止点击。但是我的问题出现了，我们能否阻止仅<i>在锚标签内出现的点击。

<a href='#' id='someLink'>some text <i class="disable-pointer-event">External</i></a>

有什么线索吗？任何帮助将不胜感激 ！！

4

4 回答 4

3 
document.getElementById('someLink').onclick = e => {
    if(e.path.map(p => p.tagName).includes('I'))
       e.preventDefault();

 /*  OR

if(e.target.tagName ===  'I')
    e.preventDefault();
*/
}
于 2021-12-28T07:16:10.810 回答
2

如果图标只是与链接相关联的视觉线索，您可以将其从实际 HTML 中删除，并将其作为伪元素添加到锚元素。

a {
  position: relative;
}

a::after {
  position: absolute;
  content: var(--icon);
  pointer-events: none;
}
<a href='#' id='someLink' style="--icon: 'External';">some text</a>

于 2021-12-28T08:37:20.873 回答
1

javascript:void(0)您可以像这样通过传递到 href来禁用链接

<a href="javascript:void(0)" id='someLink'>some text <i>External</i></a>
于 2021-12-28T06:14:01.740 回答
0

你可以简单地从标签中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>

于 2021-12-28T06:49:44.743 回答