web-dev-qa-db-ja.com

jQueryクリックイベントからfalseを返す

クリックイベントを次のように設定しています。

$('.dialogLink')
    .click(function () {
        dialog(this);
        return false;
    });

すべてに「return false」があります

誰かがこれが何をするのか、それが必要かどうかを説明できますか?

54
Alan2

イベントハンドラからfalseを返すと、そのイベントのデフォルトアクションが防止され、DOMを介してバブリングするイベントが停止します。つまり、これは次のことと同等です。

$('.dialogLink')
   .click(function (event) {
       dialog(this);
       event.preventDefault();
       event.stopPropagation();
});

'.dialogLink'<a>要素をクリックすると、クリック時のデフォルトアクションはhrefに移動します。クリックハンドラからfalseを返すと、それができなくなります。

あなたのケースでそれが必要かどうかについては、ナビゲートではなくクリックに応答してダイアログを表示したいので、答えはイエスだと思います。クリックハンドラーを配置した要素にクリック時のデフォルトアクションがない場合(たとえば、divをクリックしても通常は何も起こりません)、キャンセルするものがないためfalseを返す必要はありません。

クリックに応答して何かをしたいが、デフォルトのナビゲーションを続行させたい場合は、falseを返さないでください。

参考文献:

92
nnnnnn

イベントハンドラの戻り値は、デフォルトのブラウザの動作も同様に発生するかどうかを決定します。リンクをクリックした場合、これはリンクをたどることになりますが、違いはフォーム送信ハンドラーで最も顕著であり、ユーザーが情報の入力を間違えた場合にフォーム送信をキャンセルできます。

このためのW3C仕様があるとは思わない。このような古代のJavaScriptインターフェイスにはすべて「DOM 0」というニックネームが付けられており、ほとんどの場合指定されていません。古いNetscape 2のドキュメントを読むと運がいいかもしれません。

この効果を達成する最新の方法は、event.preventDefault()を呼び出すことであり、これは DOM 2 Events仕様 で指定されています。

正しい方法は次のとおりです。

$('.dialogLink')
   .click(function (e) {
       dialog(this);
       e.preventDefault();
       e.stopPropagation(); // Stop bubbling up
});