如何使标签内的锚链接不可点击或禁用？

Posted 2023-02-24

【中文标题】如何使标签内的锚链接不可点击或禁用？

【英文标题】：How do you make an anchor link inside tag non-clickable or disabled?

【发布时间】：2021-12-28 06:09:23

【问题描述】：

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

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

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

【问题讨论】：

你已经有了disable-pointer-event这个类，那你为什么不直接为那个类设置pointer-events: none呢？

因此，您的意思是想让文本some text 可点击，但<i> 元素不可点击？

是的，正确的 Dhana。

将<i> 元素放在<a> 元素之外怎么样？

【参考方案1】：

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

 /*  OR

if(e.target.tagName ===  'I')
    e.preventDefault();
*/

【参考方案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>

【参考方案3】：

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

<a href="javascript:void(0)" id='someLink'>some text <i>External</i></a>

【讨论】：

我只希望 <i> 标签在 a 标签内被禁用，而不是整个 a 标签。

【参考方案4】：

您可以简单地从a 标记中获取i 元素，即使如果您希望使其不可点击的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>