12

ラベルをクリックすると、ラベルといくつかの機能が実行されます。

しかし、クリックイベントが発生すると、ダブルクリックイベントが発生し、関数が2回実行されます...

ここでライトの例を見ることができます

HTML:

<label>
<input type="checkbox" id="checkbox"> Click here
</label>
<input type="text" id="test" value="0"/> clicks​​​

JavaScript:

$(document).ready(function(){
    $('label').click(function(event) {
         $('#test').val(parseInt($('#test').val())+1);
         event.preventdefault();
    });
});​
  • チェックボックスをクリックすると、クリックカウンターは +1 >> OK
  • ラベルをクリックすると、クリック カウンターは +2 >> Nok

この問題を解決するには？

編集

preventdefault()ダブルクリックをpreventDefault()修正しましたが、チェックボックスはもうチェックされていません...

4

6 に答える 6

12

さて、これは興味深いです。2つclickのイベントが表示されています。1つはチェックボックスからのもので、もう1つはinput（もちろん）からのものlabelです。そして、それは理にかなっています。設計上、aをクリックすることは、ラベルlabelのチェックボックスをクリックすることに似ています。これが何が起こっているかを示す更新されたフィドルです。label

したがってclick、チェックボックスをフックするだけで、ラベルにはフックしないでください。

$(document).ready(function(){
    $('#checkbox').click(function(event) {
        $('#test').val(parseInt($('#test').val())+1);
    });
});​

更新されたフィドル

そして、ロケットが質問のコメントで言ったように：それにpreventDefault大文字Dが含まれているので、あなたのコードは例外を投げていました。しかしpreventDefault、チェックボックスをオンにしたいので、とにかく望んでいませんでした。

于 2012-05-30T15:50:59.613 に答える
2

簡単な回避策は、呼び出しの 1 つを無視することです。以下を参照してください。

$(document).ready(function(){   
    $('label').click(function(event) {
        if (event.target.nodeName == 'LABEL') return;
        $('#test').val(parseInt($('#test').val())+1);         
    });
});

デモ

于 2012-05-30T15:55:34.073 に答える
1

Uncaught TypeError：オブジェクト＃にはメソッド'preventdefault'がありません

dinpreventdefaultは大文字にする必要があります。

編集：ラベルにネストされたチェックボックスのブラウザの動作は、ラベルがクリックされたときにチェックボックスのクリックをトリガーすることです。元の問題を解決するには、増分クリックハンドラーをチェックボックスにのみ関連付けます。

$(document).ready(function(){
    $('#checkbox').click(function(event) {
         $('#test').val(parseInt($('#test').val())+1);
    });
});​

http://jsfiddle.net/vgWGT/28/

関連：http ：//www.webmonkey.com/2010/02/javascript_debugging_for_beginners/

于 2012-05-30T15:47:30.287 に答える
1

preventDefault() は元の機能を無効にします。これを試して：

$(document).ready(function(){
    $('input:#checkbox').click(function() {
         $('#test').val(parseInt($('#test').val())+1);
    });
});
于 2012-05-30T16:06:09.997 に答える
-2

次のようにします。

<div class="click">
<input type="checkbox" id="checkbox">
<label>Click here</label>
</div>

<input type="text" id="test" value="0"/> clicks​


$(document).ready(function(){
    $('.click').click(function(event) {
         $('#test').val(parseInt($('#test').val())+1);
         event.preventdefault();
    });
});
于 2012-05-30T15:54:51.360 に答える