根据 HTML 标准，哪些 HTML 标签用于点击事件？答案

【问题标题】：As per HTML standard which HTML tags use for click event?根据 HTML 标准，哪些 HTML 标签用于点击事件？
【发布时间】：2022-01-28 10:20:42
【问题描述】：

最近，我遇到了这个问题，我正在处理一个项目，在主题中，它在 <span> 标签上使用了 click 函数。

它在除Safari 之外的所有浏览器上都运行良好。我做了一些研究，发现很多人在 Safari 浏览器上遇到过这种问题。

代码如下：

$('.menuOpen').on('click', function() {
  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 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>

剧透：我的问题在<span class="menuOpen" role="button">Menu</span> 上使用role="button" 得到了解决。

这里：

Click event on <span> or <div> tag not working safari issue

但是这个问题让我想知道根据 HTML 标准，我们可以为"Click" 事件使用哪些元素。

据我所知，我们可以在几乎所有标签上添加 click 事件，但按照 HTML 标准，我们应该在 <a> 或 <button> 标签上添加点击事件。

在触发click 事件时，是否还有其他符合我们应该使用的标准的 HTML 标记？

【问题讨论】：

您可以根据 HTML5 规范在任何标签上设置onclick 事件。 stackoverflow.com/questions/22074841/…
我无法在 iPadOs15.2.1 上的 Safari 15.2 上重现该问题。 onclick 事件在 GlobalEventHandlers mixin 中定义，HTMLElement 接口实现它。所以技术上实现HTMLElement接口的所有元素都应该支持onclick。

标签： html onclick click cross-browser w3c-validation

【解决方案1】：

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

按钮（任何类型）
输入类型；
- 按钮
- 收音机
- 复选框
- 范围
- 重置
- 提交
- 图片
标签
选择
锚点（虽然我不鼓励这样做，因为它的预期行为）

您可以在Mozilla Developer | HTML Elements Reference | Example 找到 HTML 元素的参考。

从技术上讲，您可以通过修改元素的全局.onclick 属性使任何元素可点击，Mozilla 在这里提供了一个示例Mozilla Developer | GlobalEventHandlers.onclick。尽管如果您这样做，请确保您还将元素 role 属性修改为 role=button（如 OP 的问题中所述），这允许辅助技术找到元素.可以在Mozilla Developer | Using ARIA: Roles, states, and properties 找到 ARIA 属性列表（包括按钮角色）

W3Cs Web Content Accessibility Guidelines 还概述了应用于与 Assistive Technologies W3C | WCAG | Using HTML form controls and links 进行键盘交互的某些元素，尽管对于这个问题，我相信角色下的任何元素：

分组
可编辑文本

可以忽略。

【讨论】：

【解决方案2】：

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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

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

它只适用于 html 中的所有标签

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

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

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

【讨论】：