悬停并单击<button>内<span>上无效的事件

Question

无论如何我的：悬停和点击事件可以在按钮内部的跨度上工作吗？目前没有任何事情发生，大概是因为按钮功能正在优先考虑。

如果按钮转换为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/

Answer 1

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