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，但不能点击ff。当我点击.icon时，会点击整个button。

问题：

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

我尝试了什么

我尝试从控制台执行$('.icon').click()并且它在ff中完美运行，所以我猜问题是span在button内无法点击。
e.preventDefault()和e.stopPropagation也无效。
我尝试将 放在span内，但它也无效。

Answer 1

请参阅spec，最明显的是禁止内容（在SGML定义中;有助于阅读look here）：a s，form s，表单“控件”（input，select等）和fieldset s。

虽然你断言span s（和div s等）是button元素的合法内容是正确的，但非法元素与拥有按钮内容有关除了布局/样式之外，它还可以做任何事情。

我没有看到规范中的任何内容排除了你想要做的事情，但我确实看到了很多令人沮丧的事情，并且如果各种浏览器也“不鼓励”不支持它，那就不足为奇了。

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

一种方法可能是不使用按钮，而是使用其他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中具有（模糊）或（聚焦）事件。

跨越内部按钮，在ff中无法单击

3 个答案: