span 内部按钮，在 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;
}

演示

问题

---

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

问题：

---

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

我试过的

---

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

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

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

Answer 1

参考规范，最值得注意的是禁止的内容（在 SGML 定义中；为了帮助阅读，请看这里）： a s、 form s、表单“控件”（ input 、 select等）和fieldset s。

虽然您断言span s（和div s 等）是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>

Answer 2

如果你在这里，也许这个解决方案对你有用，即使它与问题没有直接关系。

如果你已经申请了

• $("button").click()监听器，以及
• 您的按钮包含<span>或任何其他<tag> ，并且
• 你的.click回调函数指的是$(this) （甚至this ）

然后，如果您点击该按钮， this可能是您点击的最上面的标签。

这通常会（例如在我的情况下）错误地归因于调用者，从而导致脚本错误。

希望它可以帮助那里的人！

Answer 3

使用以前的答案，我发现只需更改我的即可解决问题并允许我在按钮内包含内容。 样式几乎相同，我只是在那里留下了相同的引导按钮类和元素，它的行为与以前一样。 tabindex 在那里是因为我在按钮内使用了一个下拉列表，以便按钮（现在是 div）可以聚焦并在 Angular 中具有 (blur) 或 (focusout) 事件。