span 位于按钮内，在 Firefox 中不可点击

My CODE

HTML:

<p id="console"></p>
<button>Click <span class="icon"></span>
</button>

JS:

$('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
});

$('button').click(function () {
    $('#console').html('Button has been clicked');
});

CSS:

.icon {
    background-position: -96px 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png"); 
    background-repeat: no-repeat;
}

Demo http://jsfiddle.net/jashwant/vFyp2/

Problem

我可以点击.icon在 Chrome 中，但在 Firefox 中则不然。当我点击.icon，它点击整个button.

问题：

我的代码无效吗？如果我的代码有效，这个问题的解决方案是什么。

我尝试过的

1. 我试过做$('.icon').click()从控制台，它在 ff 中完美工作，所以我想问题是span里面不可点击button.

2. e.preventDefault() and e.stopPropagation也不工作。

3. 我试过把  inside span但它也不起作用。

请参阅spec http://www.w3.org/TR/html401/interact/forms.html#h-17.5，最值得注意的是禁止的内容（在 SGML 定义中；为了帮助阅读该内容，看这里 http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3): as, forms，形成“控制”（input, select等），以及fieldsets.

虽然你的断言是正确的spans (and divs等）是a的合法内容button元素，非法元素都与按钮内容执行布局/样式以外的任何操作有关。

我在规范中没有看到任何内容排除了你想要做的事情，但我确实看到了很多令人沮丧的事情，并且如果各种浏览器也通过不支持它来“阻止”它，我也不会感到惊讶。

这就是说：如果您想获得跨浏览器支持，请找到另一种方法来做您想做的事情。我不明白你实际上想做什么，所以我认为不可能提出替代方案。我知道您想要对单击按钮和单击图标做出不同的反应 - 但这是您不希望发生的事情的（好的，顺便说一句）演示，而不是对您想要解决的实际问题的解释。

一种方法可能是不使用按钮，而是使用另一个按钮span or a div:

<p id="console"></p>
<div class="button_replace">Click <span class="icon"></span></div>
<script>
  $('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
  });
  $('.button_replace').click(function () {
    $('#console').html('Button has been clicked');
  });
</script>