我将哪些 HTML 元素用于点击事件？

Question

最近，我在处理其中一个项目时遇到了这个问题，在主题中，它在 <span> 标签上使用了点击功能。它在除 Safari 之外的所有浏览器上都运行良好。我做了一些研究，发现很多人在 Safari 上遇到过这种问题。

我根据此处找到的信息，在 <span class="menuOpen" role="button">Menu</span> 上使用 role="button" 解决了我的问题：

但是这个问题让我想知道我们可以为“点击”事件使用哪些元素。

据我所知，我们可以在几乎所有元素上添加 click 事件，但根据 HTML 标准，我们应该只在 <a> 或 [=16] 上添加点击事件=] 标签。

我们应该使用任何其他 HTML 元素来触发 click 事件吗？

Answer 1

只要给你的标签一个名为onlcick的属性，然后在后面填写函数名。使用什么标签并不重要，您可以将每个标签用作网页上的可点击元素。所以无论它是 <a> 还是 <button> 还是 <p> 还是 <div>

它只适用于 html

中的所有标签

只需执行以下操作即可为您的代码添加点击功能

<span class="menuOpen" onclick="FunctionName">Menu</span>

https://www.w3schools.com/tags/ev_onclick.asp

Answer 2

（当前）共有 5 个 HTML 元素可以默认用作“可点击”元素：

按钮（任何类型）
输入类型；
- 按钮
- 电台
- 复选框
- 范围
- 重置
- 提交
- 图片
标签
选择
锚点（尽管由于预期的行为我不鼓励这样做）

您可以在 Mozilla Developer | HTML Elements Reference | Example.

找到 HTML 个元素的参考

从技术上讲，您可以通过修改元素的全局 .onclick 属性使任何元素 可点击 ，Mozilla 在此处提供了一个示例 Mozilla Developer | GlobalEventHandlers.onclick. Though if you do this please ensure you also modify the elements role attribute to role=button (as was stated in OPs question), this allows assistive technologies to find the element. A list of ARIA attributes (including the button role) can be found at Mozilla Developer | Using ARIA: Roles, states, and properties

W3C 的 Web 内容可访问性指南还概述了应该用于与辅助技术进行键盘交互的某些元素 W3C | WCAG | Using HTML form controls and links，尽管对于这个问题，我相信角色下的任何元素：

分组
可编辑文本

可以忽略。

Answer 3

function Menu() {
  console.log('Show Menu');
  $('.menuBar').toggleClass('d-none');
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<span Onclick="Menu()" class="menuOpen">Menu</span>
<ul class="d-none menuBar">
  <li>Action 1</li>
  <li>Action 2</li>
  <li>Action 3</li>
  <li>Action 4</li>
</ul>

我将哪些 HTML 元素用于点击事件？

Which HTML elements do I use for a click event?

html

onclick