jquery - 包含标签的按钮可能导致双重触发

Question

我对按钮内的标签有问题，因为单击标签也会导致按钮单击触发。

所以我接连发生了两个被触发的事件，这当然是我不想要的。

我的带有标签的按钮如下所示：

<button id="b" name="Button" class="btn btn-primary btn-large">
    <label id="b_button_label" class="fontf">
        Click me
    </label>
</button>

是否有任何快速的解决方案，也许是使用 jquery，来防止双重触发？

score 4 · Accepted Answer

是的，解决方案是不要在按钮内放置标签。

标签用于描述控件本身，单击控件标签的行为就像单击控件本身一样。

从规范：

标签代表用户界面中的标题。标题可以与特定的表单控件相关联，称为标签元素的标签控件，可以使用 for 属性，也可以将表单控件放在标签元素本身中。

score 1 · Accepted Answer

我不认为这是一个有效的 HTML 代码。不能在 BUTTON 内添加 LABEL。向按钮添加文本的一种简单方法是：

<button id="b" name="Button" class="btn btn-primary btn-large">click me</button>

score 1 · Accepted Answer

您可以在 jQuery 中使用 stopPropagation 事件来冒泡事件

$(function() {
    $('#b_button_label').on('click' , function(e) {
       e.stopPropagation();

       // Your code goes here
    });
});

另外，当您有值字段来显示其文本时，为什么要在按钮内添加标签。

3 回答 3