31

changeタイトルが示すように、チェックボックスのイベントとイベントの違いを知りたいclick（jQueryで）

私はこれに対する答えを読みましたチェックボックスの.clickと.changeの違いは何ですか

しかし、それは私にとってはうまくいきません。changeフォーカスを失うことなくスペースをヒットしても発火します。

ここにフィドルのデモがあります

どちらも同じように機能しているようです。ここで何か不足していますか？

4

7 に答える 7

59

W3C によると、onclickイベントはアクセシビリティの目的でキーボードによってトリガーされます。

SCR35: アンカーとボタンの onclick イベントを使用して、アクションをキーボードでアクセスできるようにする

マウスを使用しないユーザーにより良いユーザー エクスペリエンスを提供するために、ブラウザーは、クリックがキーボードで発生したonclick場合でもイベントを発生させるように開発されています。

このため、キーボードのスペースバーを使用してチェックボックスをクリックclickしても、jQuery のイベントが発生します。、明らかに、チェックボックスの状態が変化するたびに起動します。change

changeチェックボックスは、とが交換可能な特殊なケースです。これは、もトリガーせずclickにイベントを発生させることができないためです。changeclick

もちろん、このルールの例外は、javascript を使用してチェックボックスを手動で変更する場合です。たとえば、次のようになります。

/* this would check the checkbox without firing either 'change' or 'click' */
$('#someCheckbox').prop('checked',true);

/* this would fire 'change', but not 'click'. Note, however, that this
   does not change the checkbox, as 'change()' is only the function that
   is fired when the checkbox changes, it is not the function that
   does the changing  */
$('#someCheckbox').trigger('change');

/* this would fire 'click', which by default change state of checkbox and automatically triggers 'change' */
$('#someCheckbox').trigger('click');

これらのさまざまなアクションのデモを次に示します: http://jsfiddle.net/jackwanders/MPTxk/1/

お役に立てれば。

于 2012-06-28T19:24:01.247 に答える
9

主な違い：フォーカスされたチェックボックスでスペースをクリック/ヒットすると、最初にclickイベントが発生し、変更はありません。この時点でも、チェックボックスevent.preventDefault()の状態を切り替えるデフォルトのアクション（を使用）を防止し、イベント（デフォルトのアクションを取得していない）を発生させることができます。checkedchange

一部のブラウザでは、changeイベントは。の後の最初のblur後にのみ発生しclickます。

于 2012-07-03T20:44:58.137 に答える
3

チェックボックスが変更されたときに（クリックしなくても）その変更が発生すると思います。たとえば、他の関数を介してチェックボックスの状態を変更した場合。

于 2012-06-26T11:08:59.050 に答える
1

私が経験した違いはこれです：

var $check = $(':checkbox');
$checkbox.checked = true;
$checkbox.click( function() {
    alert(this.checked); // true
}).change( function() {
    alert(this.checked); // false
});

したがって、クリックでは状態はまだ変更されていませんが、変更では...

于 2012-06-26T11:22:58.060 に答える
0

キーボード（タブとスペースバー）を使用して、クリックせずにチェックボックスをオンまたはオフにすることができます。これはステートメントを変更しますが、クリックしません。私見では

于 2012-06-26T11:09:53.193 に答える
0

これが役に立たない場合はお知らせください。投稿を削除します。

Change: http://api.jquery.com/change/state -要素が変更された場合、つまりクリックされずに変更された場合、変更イベントがトリガーされると思います。チェックボックスには、チェックされている状態とチェックされていない状態があります。

Click: クリック イベントは、要素をクリックしたときであり、チェックボックスの状態は関係ありません。

擬似コードのように

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);
于 2012-06-26T11:13:40.780 に答える
0

Change イベントは、チェック ボックスがフォーカスされているときにスペースを押すことによってチェック ボックスのステータスが変更されたときに発生します。変更イベントが指定されている場合はクリック前のその時間も実行され、クリックイベントが実行されます。

ここでは、クリア スクリプトがビンで実行されていることがわかります: http://codebins.com/codes/home/4ldqpbu

于 2012-07-03T13:24:51.700 に答える