10

我的代码

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 中单击，但不能在 Firefox 中单击。当我单击时.icon，它会单击整个button。

问题：

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

我试过的

  1. 我试过$('.icon').click()从控制台做，它在 ff 中完美运行，所以我猜问题是span里面不可点击button。

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

  3. 我试过把它&nbsp;放进去span，但它也不起作用。

4

3 回答 3

13

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

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

我在规范中没有看到任何排除您正在尝试做的事情，但我确实看到了很多令人沮丧的事情，如果各种浏览器也通过不支持它来“阻止”它，我不会感到惊讶。

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

一种方法可能是不使用按钮，而是使用另一个span或 a 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>
于 2013-02-04T16:00:55.707 回答
1

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

如果您已申请

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

然后，如果您单击该按钮，this则可能是您单击的最顶部的标签。

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

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

于 2017-10-09T10:10:19.090 回答
0

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

于 2018-02-05T09:14:02.793 回答