[Javascript] event.preventDefault()とfalseを返す


Answers

私の経験から、return falseを使用してevent.preventDefault()を使用する場合、少なくとも1つの明確な利点があります。 アンカータグでクリックイベントをキャプチャしているとします。それ以外の場合は、ユーザーが現在のページから移動する場合に大きな問題になります。 クリックハンドラーが戻り値falseを使用してブラウザーのナビゲーションを妨げる場合、インタープリターが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.
});
Question

特定のイベントが発生した後に他のイベントハンドラが実行されないようにするには、2つの方法のいずれかを使用できます。 例ではjQueryを使用しますが、これはplain-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を使うべきではない理由がいくつかありますか? より良い方法は何ですか?




return falseevent.preventDefault()の主な違いは、 return falsereturn falseコードは実行されず、 event.preventDefault()ケースではこのコードの後に​​コードが実行されることです。

あなたがfalseを返すと、背後であなたのために次のことを行います。

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();



1つの要素のonClickイベントに多くの関数をハングアップできます。 あなたは、 falseものが最後にfalseれることをどうやって確かめることができますか? 一方、 preventDefaultは、要素のデフォルトの動作のみを確実に防止します。




一般に、あなたの最初のオプション( preventDefault() )は取るべきものですが、あなたがどのコンテキストにいるのか、あなたの目標が何であるかを知る必要があります。

燃料あなたのコーディングreturn false;return false;上で素晴らしい記事を持っていreturn false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()

注:上燃料のあなたのコーディングリンクはかなりの間5xxエラーを生成しています。 私はインターネットアーカイブにそのコピーを見つけ、それをPDFに印刷してDropboxに入れましたreturn false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)




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

しかし、コードで例外が発生しないことが確実な場合は、必要なメソッドを使用することができます。

それでもfalse返す場合は、ハンドラコード全体を以下のようなtry catchブロックに置くことができます:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});



Links