HTML使文本可点击而不将其作为超链接

Question

我希望添加点击特定HTML文本的选项，并执行正确的JavaScript代码的功能。

我该怎么做？

- Emre801

Answer 1

为了语义化，我会使用一个像这样的<button>元素：

<button class="link">Clicky</button>

要使按钮看起来像普通文本，您可以使用CSS：

button.link { background:none; border:none; }

为了方便处理点击事件，我会使用jQuery，代码如下：

$(".link").on("click", function(e) {
    // e is the event object
    // this is the button element
    // do stuff with them
});

如果你的按钮有ID属性，你可以使用纯JS代码来实现：

var button = document.getElementById("your-button-id");
button.addEventListener("click", function(e) {
    // e is the event object
    // e.target is the button element
    // do stuff with them
});

- JKirchartz

---

SO上有太多待处理的编辑... 我想你是指 background: transparent;，none 不是一个有效的颜色值。 - run_the_race

@run_the_race background: transparent 等同于 background: none，也等同于 background: repeat scroll 0% 0% / auto padding-box border-box none transparent;... background 不仅仅是 background-color 的简写，详见：https://developer.mozilla.org/en-US/docs/Web/CSS/background#values - JKirchartz

Answer 2

<div id="text" onClick="function()"> your text here </div>

- Jack

---

这段代码十分丑陋、难以维护，自本世纪初以来就不再被推荐使用。事件监听器应始终在单独的脚本块或文件中声明。 - miken32

不兼容iOS系统 - run_the_race

Answer 3

适当的元素用于不是链接的交互控件是<button>Label</button>或者(<input type="button" value="Label">)。 (您可以使用CSS样式屏蔽边框和背景)。

您可以使用标准DOM API(或抽象它们的库，如YUI或jQuery)将click事件处理程序绑定到它上面。

- Quentin

Answer 4

将文本放置在带有类<span class="yourClass">text</span>的span或其他元素中，然后使用JavaScript添加事件侦听器（最好在HTML末尾）。为了简洁起见，我将使用jQuery进行演示，但也可以使用本机JavaScript。

<script>
  $('.yourClass').on('click',function(){
    //your javacript
  });
</script>

或者你可以通过搜索整个页面来查找该单词的实例，但我不建议这样做，因为它会使事情变得非常缓慢。

- Last Rose Studios

---

不要使用<span>标签。它们不是为了交互而设计的，因此如果有人使用线性输入设备（例如键盘用户或使用众多辅助技术的人）导航到它们，那么焦点将跳过它们。使用<span>标签会造成无必要的无障碍障碍。 - Quentin