javascript - 如何使链接不可点击？

Question

是否有一些 CSS 属性或其他东西可以与我的 anchor 标记一起使用以使其不可点击，或者我必须在代码后面做一些事情才能获得我想要的东西？

[编辑] onclick=return false; 正在刷新页面..我不希望这样..希望这个 anchor 标记显示为纯文本..实际上我在 anchor 标记上应用了 css..所以无法更改它到简单的标签或其他什么

Answer 1

pointer-events CSS 属性可以在 modern browsers 中设置在特定的图形元素上，并说明在什么情况下该元素可以成为指针事件的目标。

none 值确保元素永远不会成为指针事件的目标，并阻止元素上的所有点击、状态和光标选项。

a {
  display: inline-block;
  pointer-events: none;
}

<a href="http://stackoverflow.com" onclick="alert('clicked on link')">
  <svg width="140" height="140" onclick="alert('clicked on svg')">
    <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" />
  </svg>
</a>

但是，如果这些后代将指针事件设置为其他值，则指针事件可能会以其后代元素为目标。在这些情况下，指针事件将在事件捕获/冒泡阶段期间适本地触发此父元素上的事件监听器。 - MDN

a {
  display: inline-block;
  pointer-events: none;
}
a svg {
    pointer-events: fill;
}

<a href="http://stackoverflow.com" onclick="alert('clicked on link')">
  <svg width="140" height="140" onclick="alert('clicked on svg')">
    <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" />
  </svg>
</a>