在firefox的元素中缺少单击事件

I'am experiencing problem with Firefox 32 when I bind action on click event of span element inside a button element. Other browsers seems to works well.

当我绑定按钮元素中的span元素的单击事件时，Firefox 32出现了问题。其他浏览器似乎运行良好。

Here the code illustrating the issue on jsFiddle.

这里的代码说明了关于jsFiddle的问题。

<span onClick="alert('test');">**Working**</span><br>
<button>inside a button <span onClick="alert('test');">**Not working**</span></button>

Does anybody know why and if it's a bug or a feature ?

有人知道为什么吗?如果是bug还是特性?

3 个解决方案

#1

As far as i known clicking the children elements won't work because it is nested inside a button. A button is not container for child elements - only for text.

据我所知，单击子元素将不起作用，因为它嵌套在按钮中。按钮不是子元素的容器——只是文本的容器。

If you try like below it always tell that you clicked the button.

如果你尝试如下所示，它总是告诉你点击了按钮。

      <button type="button" onclick="alert('You clicked the button!');">
         inside a button <span onClick="alert('clicked span');">**Not working**</span>
      </button>

So, my suggestion is to use another span or a div

我的建议是使用另一个span或者div

      <div class="button_replace">
      inside a div <span onClick="alert('clicked span');">**working**</span>
      </div>

Hope it helps...

希望它能帮助……

Note: Your code will work in chrome but not in firefox and my answer is alternative solution for making work in firefox

注意:您的代码将在chrome中工作，但在firefox中不能工作，我的答案是在firefox中工作的替代解决方案

#2

You have to add the pointer-events property to the span element.

您必须将指针事件属性添加到span元素中。

button span {
  pointer-events: none;
}

#3

-3

Add a pointer-event to your button in css like:

在css中为按钮添加一个指针事件，比如:

button span {
    pointer-events: none;
}

Clicks on the button element will be ignored

单击按钮元素将被忽略

#1