event.preventDefault（）とfalseを返す

2960

特定のイベントが発生した後に他のイベントハンドラーが実行されないようにする場合は、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代わりに使用する必要があるいくつかの理由がありますか？より良い方法は何ですか？

javascript  jquery  event-handling  dom-events  event-propagation 
— レイエル
ソース
172
jQuery preventDefaultは他のハンドラーの実行を妨げないことに注意してください。それstopImmediatePropagationが目的です。
— クレセントフレッシュ
19
@CrescentFresh、それは他の（その後バインドされた）ハンドラーの実行を防ぎます...イベントが発生したDOMノード上で。伝播を妨げないだけです。
— まぶたのない状態
37
これらは「イベントの伝播を停止する2つの方法」ではありません。e.preventDefault（）; デフォルトのアクションを防止します。e.stopPropagation（）によって実行されるイベントの伝搬を停止しません。
— Timo Tijhof、2012年
24
この質問とその回答はjQueryに関するものです。プレーンなJavaScriptの答えを探してここに来た場合は、event.preventDefault（）とfalseを返す（jQueryなし）を
— Oriol
5
この回答には、すべてを説明する表があります。stackoverflow.com
— Adrien Be

回答:

2818

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

e.preventDefault()デフォルトのイベントが発生e.stopPropagation()するのを防ぎ、イベントが発生するのを防ぎ、return false両方を行います。この動作は通常の（jQuery以外の）イベントハンドラーとは異なることに注意してください。特に、イベントreturn falseが発生しなくなることはありません。

出典：John Resig

「falseを返す」よりもevent.preventDefault（）を使用して、hrefクリックをキャンセルする利点はありますか？

— karim79
ソース
126
return falseDOM2ハンドラー（addEventListener）からは何もしません（デフォルトを妨げず、バブリングを停止しません; Microsoft DOM2ハンドラー（attachEvent）からはデフォルトを防ぎますがバブリングはしません; DOM0ハンドラー（onclick="return ..."）からはデフォルトを防ぎます（提供されます）あなたには、return属性内）が、バブリングではない。それはjQueryの事なのでjQueryのイベントハンドラから、それは、両方を行います。詳細はこちらとライブのテストを
— TJクラウダー
12
ここで「伝播」と「デフォルト」を定義すると役立ちます。私はそれらを混乱させ続けています。これは正しいです？ 伝播 =コード（親要素のJavaScriptイベントハンドラー）。 デフォルト =ブラウザコード（リンク、テキスト選択など）
— ボブスタイン
5
バブリングとはどういう意味ですか？例？
— Govinda Sakhare
5
+1は、jQuery以外のイベントハンドラでのイベントの伝播を停止return falseしないことを示します。つまり、イベント<a href="#" onclick="return false">Test</a>が発生するのを止めません。
— Doug S
424

私の経験から、event.preventDefault（）を使用する場合、return falseを使用するよりも少なくとも1つの明確な利点があります。アンカータグでクリックイベントをキャプチャするとします。それ以外の場合、ユーザーが現在のページから移動する場合は大きな問題になります。クリックハンドラーがreturn 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.
});
— ジェフ・ポールトン
ソース
68
真実ですが、プログレッシブエンハンスメントを実行するときは反対の動作が望ましいことがよくあります（これがおそらくデフォルトのアクションをオーバーライドする最も可能性の高い理由だと思います）
— meandmycode
どちらもイベントのデフォルトの動作をブロックする方法であり、解決しようとしている問題の問題です。
— Ferkze
102

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

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

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

MDNのドキュメントでは、return falseでは、イベントハンドラーでの動作

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

詳細については、MSDNのattachEventとW3C DOM 2イベントのドキュメントをご覧ください。

— ガレット
ソース
6
@rdsつまり、「preventDefaultはDOMを介したイベントのそれ以上の伝播を停止しません。そのためには、event.stopPropagationを使用する必要があります。」
— ギャレット、
答えは密接に関連する質問については、前HTML 5に、イベントハンドラから偽を返すことはなかったことを主張しているspeccedまったく何もしてて。さて、多分それは（理解しにくい）仕様の間違った解釈だ、または多分それはすべてのブラウザが解釈文字通りspeccedされていないにも関わらずreturn false同じにevent.preventDefault()。しかし、私は知りません。これを塩ひとつまみにしておくだけで十分です。
— Mark Amery 2016年
9
グーグルのすべてのjavascript検索結果が実際にjQuery、+ 1についていかに嫌いか
— Alexander Derck
彼はそれをJavaScriptとjQueryの両方としてタグ付けしており、どちらも正しいです。jQueryはJavaScriptのサブセットにすぎず、独自の言語ではありません。
— ProfK
57

jQueryを使用return falseする場合、を呼び出すと、3つの異なる処理が実行されます。

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

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

— ジェームズドリンカード
ソース
コードの他の部分がこのイベントをリッスンしている場合、event.stopPropagation（）; コールバックをキャンセルしますか？
— フェルクゼ
41

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

— エルダール・ジャファロフ
ソース
20

おもう

event.preventDefault()

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

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

また、すべての状況でreturn falseを使用することはできません。href属性にJavaScript関数を指定し、falseを返す場合、ユーザーはfalse文字列が書き込まれたページにリダイレクトされます。

— ラフル
ソース
4
私が今まで会ったどのブラウザにもありません。多分あなたは<a href="javascript:return false"それを何かと混同しますか？
— mplungjan 2012
10
-1; falseを返すhrefが「false」という単語が書かれたテキストページを生成するという主張は完全にナンセンスです。
— Mark Amery 2016年
1
（マイナス）1; 壊れたリンク+完全なナンセンス
— Phil
15

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

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

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
— ナガスリヌカプセッティ
ソース
1

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

event.preventDefault()

return false event.preventDefault()正常に機能するのではなく、必要に応じて、送信イベントを実際に停止または防止します。

— Dilip0165
ソース
11
より良い理由は？あなたはここで文字通りゼロの正当化を与えました。-1。
— Mark Amery
複数のイベントバインディングがある場合、e.preventDefault（）はfalseを返すよりもターゲットにされます。
— Taiger
preventDefault私が理解している「デフォルトを妨げる」いくつかの英単語です。return false私が理解しているいくつかの英語の単語は「偽を返す」が、私がこの暗号コードをグーグルするまでなぜなのかわからない。そしてボーナス、私はseparatly制御することができますstopPropagationとpreventDefault 。
— ジョーン
1

との主な違いはreturn false、event.preventDefault()以下のコードはreturn false実行されず、event.preventDefault()コードは実行、コードがこのステートメントの後に実行場合です。

return falseを書くと、舞台裏で次のことを行います。

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
— アブドラ・ショアイブ
ソース
1

e.preventDefault（）;

要素のデフォルトのアクションを停止するだけです。

インスタンス例：-

ハイパーリンクがURLをたどらないようにし、送信ボタンがフォームを送信するのを防ぎます。多くのイベントハンドラーがあり、デフォルトのイベントが発生しないようにしたい場合、およびfunction（）の上部で使用する必要があるため、何度も発生しないようにする場合。

理由：-

使用する理由e.preventDefault();は、コードで何か問題が発生したため、リンクまたはフォームを実行して送信したり、必要なアクションを実行または許可したりするためです。＆リンクまたは送信ボタンは送信され、さらにイベントの伝播を許可します。

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>
スニペットを展開

Falseを返します。

それは単にfunction（）の実行を停止します。

" return false;"はプロセスの実行全体を終了します。

理由：-

使用する理由はfalseを返します。厳密なモードで関数を実行したくないということです。

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>
スニペットを展開

— Parth Raval
ソース
1

基本的に、jQueryは主にHTML要素に焦点を当てたフレームワークであるため、基本的にこの方法で物事を組み合わせ、基本的にデフォルトを回避しますが、同時に、伝播を停止してバブルアップします。

したがって、簡単に言うと、falseを返すことは次jQueryと等しいです。

falseを返すのはe.preventDefault AND e.stopPropagationです

ただし、すべてがjQueryまたはDOM関連の関数に含まれていることも忘れないでください。要素で実行すると、基本的に、デフォルトの動作やイベントの伝播を含め、すべてが実行されなくなります。

基本的にの使用を開始する前にreturn false;、まず何e.preventDefault();をe.stopPropagation();して何をするかを理解し、次に両方が同時に必要だと思われる場合は、それを使用してください。

だから基本的にこの下のコード：

$('div').click(function () {
  return false;
});

このコードと等しい：

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
— アリレザ
ソース
1

私の経験からevent.stopPropagation（）は主にCSSエフェクトまたはアニメーション作品で使用されています。たとえば、カードとボタンの両方の要素にホバー効果がある場合、ボタンにカーソルを合わせると、カードとボタンの両方のホバー効果がこの場合トリガーされます、event.stopPropagation（）を使用してバブリングアクションを停止できます。event.preventDefault（）は、ブラウザアクションのデフォルトの動作を防止するためのものです。たとえば、フォームはありますが、送信アクションに対してクリックイベントのみを定義しました。ユーザーがEnterキーを押してフォームを送信した場合、ブラウザはkeypressイベントによってトリガーされます。ここではクリックイベントではなく、event.preventDefault（）を使用して不適切を回避する必要があります。動作。地獄が何であるか私にはわかりません。申し訳ありません。詳細については、このリンクにアクセスして、＃33行をいじってくださいhttps://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

— サティッシュ・シャジャハン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.