3154

特定のイベントが発生した後に他のイベント ハンドラーが実行されないようにする場合は、2 つの手法のいずれかを使用できます。例では jQuery を使用しますが、これはプレーン JS にも当てはまります。

1.event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2.return false

$('a').click(function () {
    // custom handling here
    return false;
});

イベントの伝播を停止するこれら 2 つの方法に大きな違いはありますか?

私にとってreturn false;は、メソッドを実行するよりも簡単で、短く、おそらくエラーが発生しにくいです。メソッドでは、正しい大文字と小文字、括弧などについて覚えておく必要があります。

また、メソッドを呼び出せるようにするには、コールバックで最初のパラメーターを定義する必要があります。preventDefaultおそらく、このようなことを避けて代わりに使用する理由がいくつかありますか? より良い方法は何ですか？

4

14 に答える 14

2933

return falsejQuery イベント ハンドラー内からの呼び出しは、渡されたjQuery.Event オブジェクトe.preventDefaultでとの両方を呼び出すことと事実上同じ です。e.stopPropagation

e.preventDefault()デフォルトのイベントが発生e.stopPropagation()するのを防ぎ、イベントがバブリングするのを防ぎ、return false両方を行います。この動作は通常の (jQuery 以外の) イベント ハンドラーとは異なることに注意してください。通常の(jQuery 以外の) イベント ハンドラーでは、特にイベントのバブルアップが停止されreturn falseません。

ソース:ジョン・レシグ

href クリックをキャンセルするために「return false」よりも event.preventDefault() を使用する利点はありますか?

于 2009-08-31T12:05:19.110 に答える
450

私の経験から、return falseを使用するよりもevent.preventDefault（）を使用する場合の明らかな利点が少なくとも1つあります。アンカータグのクリックイベントをキャプチャするとします。そうしないと、ユーザーが現在のページから移動した場合に大きな問題になります。クリックハンドラーがreturnfalseを使用してブラウザーのナビゲーションを防止すると、インタープリターがreturnステートメントに到達せず、ブラウザーがアンカータグのデフォルトの動作の実行に進む可能性があります。

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

event.preventDefault（）を使用する利点は、これをハンドラーの最初の行として追加できることです。これにより、関数の最後の行に到達しなくても、アンカーのデフォルトの動作が起動しないことが保証されます（ランタイムエラーなど）。 ）。

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});
于 2011-01-22T22:37:09.570 に答える
111

あなたがタイトルを付けたように、これは「JavaScript」の質問ではありません。jQueryの設計に関する質問です。

jQuery と以前にリンクされたJohn Resigからの引用( karim79 の メッセージ) は、イベント ハンドラーが一般的にどのように機能するかについての誤解の原因のようです。

事実: false を返すイベント ハンドラーは、そのイベントの既定のアクションを防ぎます。イベントの伝播は停止しません。Netscape Navigator の昔から、イベント ハンドラは常にこのように機能してきました。

MDNのドキュメントreturn falseでは、イベント ハンドラーがどのように機能するかを説明しています。

jQuery で起こることは、イベント ハンドラーで起こることと同じではありません。DOM イベント リスナーと MSIE の "接続された" イベントは、まったく別の問題です。

詳細については、MSDN の attachEventおよびW3C DOM 2 Events ドキュメントを参照してください。

于 2010-06-20T21:31:29.447 に答える
70

通常、最初のオプション ( preventDefault()) を選択しますが、現在の状況と目標を把握する必要があります。

Fuel Your Codingにはvs vs vsに関する素晴らしい記事return false;event.preventDefault()event.stopPropagation()event.stopImmediatePropagation()があります。

于 2011-04-09T18:32:33.127 に答える
60

jQueryを使用するreturn false場合、それを呼び出すときに3つの別々のことを実行しています。

  1. event.preventDefault();
  2. event.stopPropagation();
  3. コールバックの実行を停止し、呼び出されるとすぐに戻ります。

詳細と例については、 jQueryイベント：Stop（Mis）UsingReturnFalseを参照してください。

于 2013-02-19T15:54:37.647 に答える
46

onClick1 つの要素のイベントに多くの関数を掛けることができます。false1 つが最後に発射されることをどのように確認できますか? preventDefault一方、要素のデフォルトの動作のみを確実に防止します。

于 2009-08-31T12:02:31.520 に答える
21

おもう

event.preventDefault()

イベントをキャンセルする w3c 指定の方法です。

これは、イベントのキャンセルに関する W3C 仕様で読むことができます。

また、すべての状況で return false を使用できるわけではありません。href 属性に javascript 関数を指定して false を返すと、false の文字列が書かれたページにリダイレクトされます。

于 2009-08-31T12:04:24.043 に答える
18

これを行う最善の方法は、を使用するevent.preventDefault()ことだと思います。ハンドラーで例外が発生した場合、returnfalseステートメントがスキップされ、動作が希望とは逆になるためです。

ただし、コードが例外をトリガーしないことが確実な場合は、任意の方法を使用できます。

それでも return を使用したい場合はfalse、ハンドラー コード全体を以下のように try catch ブロックに入れることができます。

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
于 2013-03-09T19:27:34.057 に答える
1

私の経験からの私の意見は、常に使用する方が良いということです

event.preventDefault()

実際には、正常に動作するのではなく、必要なときにいつでも送信イベントを停止または防止しreturn false event.preventDefault()ます。

于 2014-09-29T11:28:08.497 に答える