悬停和单击事件在 <button> 内的 <span> 上不起作用答案

【问题标题】：Hover and click events not working on <span> inside a <button>悬停和单击事件在 <button> 内的 <span> 上不起作用
【发布时间】：2016-04-21 11:34:51
【问题描述】：

我的 :hover 和 click 事件是否可以在按钮内的 span 上工作？目前什么都没有发生，大概是因为按钮功能处于优先地位。

如果按钮转换为 div，那么一切正常。但是 - 我没有这个选项。

有什么想法吗？

HTML：

<button>
<span>item 1 <i onclick="alert('1')">x</i></span>
<span>item 2 <i onclick="alert('2')">x</i></span>
<span>item 3 <i onclick="alert('3')">x</i></span>
</button>

CSS

i:hover{
    border:1px solid #fff;
}

https://jsfiddle.net/c72qd1o6/

【问题讨论】：

无法复制。您自己的现场演示在这里可以正常工作。
在这里使用按钮并没有什么意义……嗯，确实如此，但不是斜体元素（因为这些是您希望用户与之交互的东西）而不是容器为一切。

标签： html css button onclick hover

【解决方案1】：

没有办法，因为按钮标签只是文本的容器，不能对子元素有任何事件。

【讨论】：

我确实忘了告诉你，这并不是对所有浏览器都有效。其中一些允许按钮嵌套带有事件的子元素，但大多数都不能。所以考虑到跨浏览器的兼容性，在按钮内使用这样的子元素并不是一个好主意。
可以修改按钮的定义使其更像一个div吗？（不改变元素类型）
处理按钮的方式完全取决于浏览器。你有什么不能使用 div 的正当理由吗？
“按钮标签只是文本的容器”——不正确，the spec says 内容模型是“短语内容，但不能有交互式内容后代”。不是“文字”
它必须是