在按钮或其父级上拥有单击处理程序之间的区别？

Question

之间

<button onClick={...}>Click me</button>

和

<span onClick={...}>
  <button>Click me</button>
</span>

对于用户来说有什么区别吗？我知道点击事件总是会冒泡到span元素，但是是否会出现任何可访问性问题或由此产生的意外后果？

Answer 1

差别很大！

如果您按 Tab 键<button>使其成为焦点，则可以使用激活它Enter，它将激活单击处理程序。它不会使用 a 来执行此操作<span>（即使您添加tabindex="0"到 a 中<span>，因此它是可聚焦的）。

另外，在 a<span>周围有一个单击处理程序<button>也会导致问题，因为您随后嵌套了活动元素。这意味着当您单击<button>a 中的时<span>，无法知道哪个元素应该触发事件（是<span>单击处理程序还是<button>单击处理程序？）

问题是，为什么要将处理程序附加到 ，<span>因为可能有更好的方法来完成您正在尝试的操作。让我知道，我会看看是否可以帮助您更好地构建事物/解决问题！