web-dev-qa-db-ja.com

event.preventDefault（）とfalseを返す

特定のイベントが発生した後に他のイベントハンドラが実行されないようにしたい場合は、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を使うべきなのにはいくつかの理由がありますか。もっと良い方法は何ですか？

javascriptjqueryjavascript-eventsevent-handlingevent-propagation
2762
RaYell

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

e.preventDefault()はデフォルトイベントの発生を防ぎ、e.stopPropagation()はイベントのバブリングを防ぎ、return falseは両方を行います。この動作は、normal（非jQuery）イベントハンドラとは異なることに注意してください。特に、return falseはイベントをnot停止しますバブリングから。

ソース： John Resig

hrefクリックをキャンセルするために「falseを返す」よりもevent.preventDefault（）を使用するメリットはありますか？

2752
karim79

私の経験からすると、event.preventDefault（）を使用するとreturn falseを使用するよりも少なくとも1つの明らかな利点があります。アンカータグのclickイベントをキャプチャしているとします。そうしないと、ユーザーが現在のページから移動してしまうと大きな問題になります。ブラウザのナビゲーションを防ぐためにクリックハンドラが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.
});
406
Jeff Poulton

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

jQueryと 以前にリンクされた引用 from John Resig （ karim79のmessage ）は、イベントハンドラが一般的にどのように機能するのかについての誤解の原因になっています。 

Fact：falseを返すイベントハンドラは、そのイベントに対するデフォルトのアクションを妨げます。イベントの伝播は停止しません。 Netscape Navigatorの昔から、イベントハンドラは常にこの方法で機能してきました。

MDNからの ドキュメンテーション はイベントハンドラの中のreturn falseがどのように働くかを説明します

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

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

95
Garrett

一般的に、あなたの最初の選択肢（preventDefault()）は取るべきものですが、あなたはあなたがどんな文脈にいて、あなたのゴールが何であるかを知らなければなりません。 

あなたのコーディングを促進する は素晴らしい return false; VS event.preventDefault() VS event.stopPropagation() VS event.stopImmediatePropagation() を持ちます。

62
JAAulde

JQueryを使うとき、return falseはそれを呼び出すと3つの別々のことをします。

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

詳細と例については、 jQueryイベント：return falseの使用の中止（Mis） を参照してください。

54
James Drinkard

1つの要素に対してonClickイベントに多くの関数を掛けることができます。どのようにしてfalseが最後に起動するのかを確認できますか？一方preventDefaultは、要素のデフォルトの振る舞いだけを確実に妨げるでしょう。

40
Eldar Djafarov

おもう

event.preventDefault()

イベントを取り消すためのW3C指定の方法です。

イベントキャンセル のW3C仕様書でこれを読むことができます。

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

18
rahul

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

しかし、コードによって例外が発生しないことが確実な場合は、任意の方法を使用できます。

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

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

私の経験からの私の意見では、それはいつも使うほうが良いという 

event.preventDefault()

return falseevent.preventDefault()ではなく、必要に応じて送信イベントを停止または防止するための実用的なはうまく機能します。

1
Dilip0165

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

あなたがreturn falseを書くとき、それは舞台裏であなたのために以下のことをします。

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

e.preventDefault（）;

それは単に要素のデフォルトの動作を止めるだけです。

インスタンス例： -

ハイパーリンクがURLをたどるのを防ぎ、送信ボタンがフォームを送信するのを防ぎます。あなたがたくさんのイベントハンドラを持っていて、デフォルトのイベントが何度も発生しないようにしたいのなら、そのために関数（）の先頭で使用する必要があります。 

理由：-

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>

1
Parth Raval

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

つまり、jQueryにfalseを返すことは次のようになります。

falseがe.preventDefaultであり、e.stopPropagationが返される

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

基本的にreturn false;を使い始める前に、まずe.preventDefault();とe.stopPropagation();が何をするのかを理解してから、両方が同時に必要であると思うのなら、それを使ってください。

そのため、基本的にこのコードは以下のようになります。

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

このコードと 等しい ：

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
0
Alireza

私の経験からすると、event.stopPropagation（）は、CSS効果やアニメーション作業で主に使用されます。たとえば、カードとボタン要素の両方にホバー効果がある場合、ボタンとボタンの両方にホバー効果がある場合event.stopPropagation（）を使用してバブリングアクションを停止できます。event.preventDefault（）は、ブラウザアクションのデフォルトの動作を防ぐためのものです。たとえば、フォームはありますが、送信アクションに対してクリックイベントのみを定義しています。ユーザーがクリックイベントではなく、Enterキーを押してフォームを送信する場合は、ここではクリックイベントではなく動作。私は一体何が偽を返すのかわからない。より明確にするためには、このリンクにアクセスし、＃33 https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request- iv

0
Sathish Shajahan