在按钮中跨度，在ff中不可点击

Question

我的密码

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;
}

问题

我可以.icon在chrome中单击，但不能在ff中单击。当我单击时.icon，它单击整体button。

题：

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

我尝试过的

1. 我尝试$('.icon').click()从控制台进行操作，并且它在ff中可以完美运行，所以我想问题是span在内部无法单击button。

2. e.preventDefault()而且e.stopPropagation也不起作用。

3. 我试过 放进去，span但是也不行。

Answer 1

请参考规范，最引人注目的是禁止的内容（在SGML定义;援助读取，看这里）：aS，forms和形式的“控制”（
，input，select等），和fieldset秒。

尽管您断言spans（和divs等）是button元素的合法内容是正确的，但非法元素与具有除布局/样式之外的其他任何内容的按钮内容有关。

我在规范中没有看到任何东西会妨碍您尝试做的事情，但是我确实看到很多令人沮丧的想法，并且如果各种浏览器也因不支持它而“劝阻”它，这将不足为奇。

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

一种方法可能是不使用按钮，而使用另一个span或按钮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>