带有标签的按钮会导致双重射击

Question

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

所以我在彼此之后得到了两个被解雇的事件，当然我不想要。

包含标签的我的按钮如下所示：

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

是否有任何快速解决方案，可能还有jquery，以防止双重射击？

Answer 1

是的，解决方法不是将标签放在按钮内。

标签用于描述控件本身，点击控件标签就像点击控件本身一样。

来自规范：

  

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

Answer 2

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

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

Answer 3

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

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

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

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