jquery - ラベルが含まれているボタンは二重発火を引き起こす可能性があります

Question

ラベルをクリックするとボタンのクリックも発生するため、ボタン内のラベルに問題があります。

それで、私は次々に2つの解雇されたイベントを受け取りましたが、もちろん私は望んでいません。

ラベルが含まれている私のボタンは次のようになります。

<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