没有标签的元素可以有 onClick 功能吗？（反应）答案

【问题标题】：Can an element with no tag have an onClick function? (Reactjs)没有标签的元素可以有 onClick 功能吗？（反应）
【发布时间】：2021-09-30 13:07:59
【问题描述】：

我有一个标题元素：

<h2>&#9782; Today's Bills</h2>

我希望 ☶ (☶) 图标有一个 onClick 功能，但没有给它一个标签，所以它保持在<h2> 标签上。

我的方法是这样的

<h2> <onClick={somfunc}> &#9782; </> Today's Bills</h2> // doesn't work

那么有没有办法做到这一点？如果没有，有没有办法给<h2>标签的这部分onClick？

我不想让它成为 2 个标签元素并编写 css 以使它们对齐，因为这可能会破坏其他东西。我比较新，所以不必这样做会更好。

【问题讨论】：

【解决方案1】：

那不行，使用一个元素（比如 span）

编辑：这个 JSX 需要转换成 HTML 并且需要将事件绑定到实际元素。

【讨论】：

【解决方案2】：

这可以通过 CSS 完成，无需插入其他元素。

如果您绝对不想在 HTML 中插入额外的元素，那么您可以使用伪前元素。

这可以保存特殊字符并将指针事件设置为自动，而实际的 h 元素没有设置指针事件。

h2 {
  pointer-events: none;
}

h2::before {
  content: "\2636";
  pointer-events: auto;
}

&lt;h2 onclick="alert('I have seen a click');"&gt;Today's Bills&lt;/h2&gt;

[目前仅在 Edge/Chrome 上测试]

但是，可能存在可访问性问题，因为我不确定每个屏幕阅读器都会宣布该特殊字符，因此使用特殊软件的人可能会错过点击它的可能性。

【讨论】：