Javascript span内部按钮，在Firefox中不可单击

我的代码

---

HTML:

CSS:

问题

---

我可以在Chrome中单击

。图标

，但在Firefox中不能。当我点击

图标时，它会点击整个
按钮。




问题：


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




我尝试过的


我试过做
$（'.icon'）。从控制台单击（）
，它在ff中工作得很好，所以我想问题是
span
无法在
按钮中单击


e.preventDefault（）
和
e.stopPropagation
也不工作


我试着把
放在
span
里面，但它也不起作用


请参阅，最明显的是禁止的内容（在SGML定义中；为了帮助阅读，）：
a
s、
form
s、form“controls”（
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>


点击
$（'.icon'）。单击（函数（）{
$（“#控制台”）.html（'已单击图标'）；
返回false；
});
$（'.button_replace'）。单击（函数（）{
$（“#控制台”）.html（'按钮已单击'）；
});
如果你在这里，也许这个解决方案会对你有用，即使它实际上与问题没有直接关系

如果你申请了


$（“按钮”）。单击（）

您的按钮包含一个
或任何其他
，以及
您的
。单击
回调函数引用
$（此）
（甚至
此
）


然后，如果您单击按钮，
这可能是您单击的最上面的标记。

这通常会导致调用方属性错误，导致脚本错误

希望它能帮助别人
 使用之前的答案，我发现只需更改我的设置即可解决问题，并允许我在按钮中包含内容。
样式几乎是一样的，我只是在那里留下了相同的引导按钮类和元素，它的行为和以前一样。tabindex之所以存在，是因为我在按钮内部使用了一个下拉列表，以便按钮（现在为div）可以聚焦，并在角度上具有（模糊）或（聚焦输出）事件。
您是否可以分别单击
。图标
和
按钮
？我使用的是firefbox 18.0.1 for ubuntu 12.04。默认情况下，按钮是可点击的，您不允许点击其中的任何内容，如果这在chrome上有效，这不是故意的。使用另一个像div这样的标记来代替button，并设置它的样式（伪造一个按钮）@JayBlanchard如果“icon”事件处理程序返回
false
，它不应该冒泡，但是（尽管我认为它无论如何都不应该工作），我可以使用
div
。但是这里怎么了
span
是
按钮的有效子项
@Jashwant它是有效的html，但不应该执行您想要的操作。您可能需要使用stopPropagation，而不是
return false，我还没有签入JSFIDLE。
$('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
});

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

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

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