javascript - span inside 按钮，在 Firefox 中不可点击

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

Demo

问题

---

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

问题:

---

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

我尝试过的

---

1. 我已经尝试从控制台执行 $('.icon').click() 并且它在 ff 中完美运行，所以我猜问题是 span 在 button 内不可点击。

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

3. 我试过将   放在 span 中，但它也不起作用。

Answer 1

引用spec ，最值得注意的是禁止的内容(在 SGML 定义中；为了帮助阅读，look here):as，forms，form“controls”( input、select 等)和fieldset。

虽然您断言 span(和 div 等)是 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>