Question

出于某种原因，我在标签中嵌套了两个按钮。每个按钮都会触发一些逻辑。但不知何故，我发现第二个按钮会触发两个按钮的逻辑（在Mac上测试FF和Safari。它可以在Chrome中使用，但是当鼠标按下第二个按钮时，两个按钮都会显示为按下它们。）

这是一个非常简单的重现问题的示例。

HTML：

<label>
    abc
    <button type="button">button1</button>
    <button type="button">button2</button>
</label>

JS：

$(function(){
    $('button').on('click', function(){
        alert($(this).text());
    });
});

点击button1时，一切顺利。

当点击button2时，你会看到button2的警告显示，然后是button1的。

有人可以告知为什么会这样吗？

添加

最简单的解决方案可能是将按钮移出标签。但我不明白其背后的理由，我很想知道这里发生了什么。
我认为这是HTML中的标准，并且应该在所有浏览器中发生。但不知何故，Chrome已经采取了一些特殊措施来阻止它。但正如您所看到的那样，点击状态仍然显示两个按钮都已被触发。

Answer 1

使用此：

$(function(){
    $('button').on('click', function(e){
        e.preventDefault();
        alert($(this).text());
    });
});

单击第一个按钮然后点击第二个按钮后，它无法正常工作，事件正在冒泡以点击按钮2，但在实施preventDefault()之后它正常工作。

Answer 2

发生这种情况的原因是因为标签可以作为焦点控制。如果你把文本框放进去;如果单击文本框或标签，它将获得焦点。由于它将按钮1视为其焦点控制，因此将通过单击标签触发它。按钮2也是标签的子项，因此这将触发标签上的事件以及按钮1上的事件

如果您从标签中移出一个按钮，它将起作用，或者防止默认也会很好

Answer 3

** Jquery Code **

$(function(){
    $('button').on('click', function(e){
        alert($(this).text());
        e.preventDefault();
    });
});