33

HTMLチェックボックスとそのラベルを含むdivコンテナがあります。jquery を使用して、誰かがこのコンテナーのラベルをクリックしたときにクリック イベントをトリガーしたいと考えていました。

ラベルをクリックすると、jquery クリック イベントが 2 回トリガーされることがわかります。

テスト目的で、ラベルの代わりにチェックボックスでクリックイベントをトリガーしました。ここでは、チェックボックスのクリックイベントは一度だけトリガーされます。

これがフィドルです。 http://jsfiddle.net/AnNvJ/2/

<tr>
    <td>
        <div id="test">
            <label>
                <input type="checkbox" id="1" />demo1</label>
            <label>
                <input type="checkbox" id="2" />demo2</label>
            <label>
                <input type="checkbox" id="3" />demo3</label>
        </div>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

Jクエリ

$(document).ready(function () {

    $('#test label').live('click', function (event) {
        alert('clicked');
    });


    $('#test checkbox').live('click', function (event) {
        alert('clicked');
    });

});
4

8 に答える 8

45

name のタグがないため、の 1 つが$('#test checkbox')呼び出されることはありませんcheckbox。

また、チェックボックスまたはラベルをクリックするかどうかに応じて、入力要素がラベルの一部であり、1 つのユニオン$('#test label')であるため、コールバックが 1 回または 2 回呼び出され、バブリングの原因となり、ラベルがクリックされた場合にもイベントを受け取ります (泡立たない、できません）。event.stopPropagation()

このようにコードを変更すると、これを確認できます。

 $('#test label').live('click', function (event) {
        event.stopPropagation(); //<-- has no effect to the described behavior
        console.log(event.target.tagName);
 });

ラベルをクリックしてください:

ラベル
入力

入力をクリックします。

入力

EDITチェックボックスではなく クリックのみを処理したい場合label-HTML構造を変更できない場合-要素のイベントを無視できます。input

次のいずれかの方法で:

$('#test label').live('click', function (event) {
    if( event.target.tagName === "LABEL" ) {
         alert('clicked');
    }
});

または、jQuery を使用してテストします。

$('#test label').live('click', function (event) {
    if( $(event.target).is("label") ) {
         alert('clicked');
    }
});
于 2013-06-19T07:31:57.443 に答える
9

入力をラベル内に配置するため、チェックボックスをクリックすると、すべての親もクリックされます（バブルと呼ばれます）編集、@ t.nieseの功績：実際、問題はラベルをクリックしたときであるため、ここにはバブルがありませんそして泡立つだけです。

ダブルクリックイベントを防ぐだけでなく、使用できるチェックボックスをオンにするには：

$(document).ready(function () {

    $('#test label').on('click', function (event) {
        event.preventDefault();
        var $check = $(':checkbox', this);
        $check.prop('checked', !$check.prop('checked'));
        alert('clicked label');
    });


    $('#test :checkbox').on('click', function (event) {
        event.stopPropagation();
        alert('clicked checkbox');
    });
});

フィドル

また、セレクターの使用法、またはJQuery API によるとどちらがより高速で互換性があるか (属性セレクター)の使用法を優先し、$.on注意してください。:checkbox[type="checkbox"]

event.preventDefault()ネイティブタグのブラウザによって処理されるすべてのアクションを停止し、 event.stopPropagation()バブリングを防ぎ、親ハンドラーにイベントが通知されないようにします

于 2013-06-19T07:36:12.880 に答える
3

OPは、ラベルのクリックイベントハンドラーが1回のクリックで2回実行されるのを防ぐ1つの解決策を見つけました。選択した回答にも適切な解決策がありますが、これはイベントのバブリングとは何の関係もないと誤って述べています。

クリックが 2 回ある理由は、イベントのバブリングに関係しています。

入力に関連付けられているラベルをクリックすると、2 つのクリック イベントがトリガーされます。ラベルに対して最初のクリック イベントがトリガーされます。そのクリック イベントのデフォルトの処理により、関連する入力に対して 2 番目のクリック イベントがトリガーされます。入力がラベルの子孫である場合、2 番目のクリック イベントはラベルまでバブルアップします。そのため、ラベルのクリック イベント ハンドラーが 2 回呼び出されます。

したがって、この問題を解決する1つの方法(OPが発見したように)は、ラベル要素内に入力を配置しないことです。2 回のクリック イベントは引き続き発生しますが、2 回目のクリック イベントは入力からラベルにバブルアップしません。

入力がラベル内にない場合、ラベルの「for」属性を使用して、ラベルを入力に関連付けることができます。「for」属性は、入力の「id」値に設定する必要があります。

<input type="checkbox" id="1" />
<label for="1">demo1</label>

もう 1 つの解決策は、入力からイベントが発生するのを止めることです。

$('#test :checkbox').on('click', function(event) {
    event.stopPropagation();
});

$('#test label').on('click', function() {
    alert('clicked');
});

次に、選択した回答に示されている解決策があります。これは、ラベルのクリックハンドラーが入力からバブルアップしたときにイベントを無視することです。ただし、次のように書くことを好みます。

$('#test label').on('click', function(event) {
    if (event.target == this) {
        alert('clicked');
    }
});
于 2015-06-12T18:54:09.747 に答える
0

私のケースと、マテリアル デザインの md ボタンを使用しているという事実に関して、上記の提案はあまりうまく機能しませんでした。言うまでもなく、tagNames が 2 つだけではなく、3 つ以上になることもあります (BUTTON、SPAN、または MD-ICON)。また、私のバージョンの Aria を変更するという Web 上の他の場所での提案も役に立ちませんでした。問題は、ng-infinate-scrollのヘルプドキュメントが最初にjqueryをロードするように言っているにもかかわらず、angular.jsの前にjqueryをロードしていたことでした。とにかく、angular ng-infinate-scroll が機能しなくなった後に jquery をロードしようとすると。そこで、最新バージョンの ng-infinate-scroll (非安定) バージョン 1.2.0 をダウンロードしました。これで、angular の後に jquery をロードできるようになりました。

于 2015-05-05T18:32:50.307 に答える
0

これは主に、子要素 Y を持つ X 要素の「クリック」をトリガーしたとき、およびユーザーが Y をクリックしたときに発生します。

実際にクリックされた要素からバブルされたイベントは、望ましくない望ましくないイベントです。

この二重トリガーを回避するには、2 つのオプションがあります...

1) $('selector').triggerHandler('any_standard_event_name') を使用します - ここで標準イベントとは、「クリック」、「変更」、「ホバー」などを意味します (このオプションを試したことはありません)。

2) カスタム イベント名を使用します。例えば。$('selector').trigger('my.click');

詳しくはhttp://api.jquery.com/trigger/をご覧ください。

于 2015-02-26T08:31:22.597 に答える
0

ラベルをクリックすると2つの別々のクリックイベントがトリガーされるという同じ問題に遭遇しました。name入力に属性を追加forし、ラベルに属性を追加することで、自分で問題を解決することができました。

例えば：

<div id="test">
    <label for="checkbox1">
        <input type="checkbox" name="checkbox1" id="1" />demo1</label>
    <label for="checkbox2">
        <input type="checkbox" name="checkbox2" id="2" />demo2</label>
    <label for="checkbox3">
        <input type="checkbox" name="checkbox3" id="3" />demo3</label>
 </div>

JavaScript は必要ありません。

于 2014-03-12T18:17:31.860 に答える