FireFox按钮子跨度和li不可点击或可悬空 [英] FireFox Button child span and li not clickable or hoverable

问题描述

我有一个通过ajax加载的对话框。里面有一系列按钮。我将子项添加到这些可点击元素的按钮中。这些是LI和SPAN元素。悬停事件是伪选择器：悬停在子项上。还有绑定到这些孩子的点击事件。这适用于Chrome，但FireFox不起作用。既不会触发悬停也不会触发点击事件。这只是被按钮阻止了吗？

I have an dialog that is loaded via ajax. Inside there are a series of buttons. I added children to these buttons that are the clickable elements. These are LI and SPAN elements. The hover event is a pseudo selector :hover on the children. There are click events bound to these children as well. This works fine on Chrome but FireFox does not work. Neither hover nor the click events are triggered. Is this simply getting blocked by the button?

推荐答案

您的问题的简答：是的。

The short answer to your question: Yes.

单击子元素将无效，因为它位于按钮内。按钮不是为儿童元素量身定制的 - 仅适用于文本。

Clicking the children elements won't work because it's inside a button. A button is not tailored to be a container for child elements - only for text.

试试这个。你会发现它总是告诉你你点击了按钮。

Try this out. You'll find that it would always tell you that you clicked the button.

<button type="button" onclick="alert('You clicked the button!');">
    <p onclick="alert('You clicked the p!');">Hello</p>
    <a href="#" onclick="alert('You clicked the a!');">Hi</a>
</button>

DEMO

这篇关于FireFox按钮子跨度和li不可点击或可悬空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！