web-dev-qa-db-ja.com

チェックボックスの変更とクリックイベントのjQueryの違い

タイトルからわかるように、チェックボックスのchangeイベントとclickイベントの違いを知りたい（jQueryの場合）

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

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

これが フィドルデモです

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

javascriptjquerycheckboxonchange
29
Jashwant

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

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

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

このため、キーボードのスペースバーを使用してチェックボックスがclickedされている場合でも、jQueryのclickイベントが発生します。 changeは、チェックボックスの状態が変化するたびに起動します。

このチェックボックスは、changeをトリガーせずにclickイベントを発生させることができないため、changeとclickを入れ替えることができる特別なケースです。

もちろん、このルールの例外は、次のように、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/

お役に立てれば。

55
jackwanders

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

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

7
pozs

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

3
PaperThick

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

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

したがって、クリックしても状態はまだ変更されていません。変更すると...

1
Simon

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

ここでは、ビンで明確なスクリプトが実行されたことがわかります。 http://codebins.com/codes/home/4ldqpb

0
gaurang171

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

0
F0G

これで問題が解決しない場合は、投稿を削除してください。

Change： http://api.jquery.com/change/ -要素のstateが変更された場合（つまり、クリックされなかった場合）、変更イベントがトリガーされます。かわった。 Checkboxが状態をチェックおよびチェック解除しました。

Click：クリックイベントは、要素をクリックしたときにチェックボックスの状態がどうなるかは関係ありません。

擬似コードのように

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);
0
Tats_innit