Question

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

Answer 1

你的问题简答：是的。

单击子元素不会起作用，因为它在按钮内部。按钮不是定制为子元素的容器 - 仅用于文本。

试一试。您会发现它总是会告诉您单击按钮。

<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

Answer 2

为什么按钮是包装器，如果它是可单击的内容？

“单击子元素将不起作用，因为它位于按钮。没有将按钮专门设计为子元素的容器 -仅用于文字。” 似乎不正确

如果包装器和子项都需要使用不同的事件处理功能或通过不同参数传递给处理程序的可单击事件，则可以使用event.stopPropagation避免由子按钮和包装器按钮同时处理click事件。据我所知，您可以嵌套按钮。

我来这里是在按钮上有一个列表（ul），li不可单击，而只是按钮内容。效果很好，除非使用的仿真器的缩放比例不同于100％。我在Chrome中使用了比例为60％的IPad仿真器。

点击位置不正确：它位于我点击的按钮上，但是当使用inspect元素（在Google chrome中）时，所选的HTML元素不是按钮（子ul或li），而是该环绕按钮旁边的元素。与我的引导程序navbar相同：它检查错误的nav-item。将模拟器缩放到100％，一切都会按预期进行。

FireFox按钮子跨度和li不可点击或可悬空

2 个答案: