web-dev-qa-db-ja.com

PreventDefault（）を使用する場合とfalseを返す場合

まず、JavaScriptのイベントモデルでは、イベントバブリング（子要素から親要素にイベントを伝播させる）と呼ばれる概念に出会います。このような種類のバブリング効果を回避するために、多くの開発者はstopPropagation( )というイベントメソッドを使用します。または、開発者はreturn falseステートメントを使用してこのような伝播を停止し始めました。現在、preventDefault( )と呼ばれる別の用語があります。名前が示すように、このメソッドは、トリガーされる要素のデフォルトの動作を防ぎます。ベストユースケースは、アンカータグがリンクを開くのを防ぐことです。

アンカータグがリンクを開かないようにする（デフォルトの動作）だけでなく、イベントが親に到達するのを停止するシナリオに出くわすことがあります。このような状況では、2行のコードを記述する代わりに、1行でそれを実行できます。 return false

javascriptpreventdefault
58
Mike

return false;

return false;は、呼び出すときに3つの個別の処理を実行します。

  1. event.preventDefault() –ブラウザのデフォルトの動作を停止します。
  2. event.stopPropagation() –イベントがDOMを伝播（または「バブリング」）するのを防ぎます。
  3. コールバックの実行を停止し、呼び出されるとすぐに戻ります。

この動作は、通常の（jQuery以外の）イベントハンドラとは異なることに注意してください。特に、return falseはイベントのバブリングを停止しません。

preventDefault（）;

preventDefault();は、ブラウザのデフォルトの動作を停止します。

それらをいつ使用するか？

私たちは彼らが何をするか知っていますが、いつそれを使うべきですか単にあなたが達成したいものに依存します。デフォルトのブラウザの動作を「ちょうど」防止したい場合は、preventDefault();を使用します。 return falseを使用します。デフォルトのブラウザの動作を防ぎ、イベントがDOMを伝播しないようにする場合。使用するほとんどの場合、falseを返します。本当に欲しいのはpreventDefault()です。

例：

例で理解してみましょう：

純粋なJAVASCRIPTの例が表示されます

例1：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

上記のコードを実行すると、ハイパーリンクが表示されます「ここをクリックしてstackoverflow.comにアクセスします」最初にそのリンクをクリックすると、javascriptアラートが表示されますLink Clicked Next you javascriptアラートdiv Clickedを取得し、すぐにstackoverflow.comにリダイレクトされます。

例2：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

上記のコードを実行すると、ハイパーリンク「ここをクリックしてstackoverflow.comにアクセスします」が表示されます。最初にそのリンクをクリックすると、javascriptアラートが表示されますLink Clicked次に、javascriptアラートが表示されます- div Clicked次に、「Click event prevent」というテキストに置き換えられた「ここをクリックしてstackoverflow.comにアクセス」というハイパーリンクが表示され、notがstackoverflow.comにリダイレクトされます。これは、デフォルトのクリックアクションがトリガーされるのを防ぐために使用したevent.preventDefault（）メソッドによるものです。

例3：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event is going to be executed'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

今回は、Linkをクリックすると、executeParent（）関数は呼び出されず、javascriptアラートdiv Clickedを取得しません。これは、event.stopPropagation（）メソッドを使用して親divへの伝播を防止したためです。次に、「ここをクリックしてstackoverflow.comにアクセスしてください」というハイパーリンクが「Clickイベントが実行されます」というテキストに置き換えられ、すぐにstackoverflow.comにリダイレクトされます。これは、event.preventDefault（）メソッドを使用して、今回はデフォルトのクリックアクションがトリガーされないようにするためです。

例4：

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

リンクをクリックしても、executeParent（）関数は呼び出されず、javascriptアラートは表示されません。これは、event.stopPropagation（）メソッドを使用して親divへの伝播を防止したためです。次に、「ここをクリックしてstackoverflow.comにアクセス」というハイパーリンクが「Click event prevent」というテキストに置き換えられ、stackoverflow.comにリダイレクトされません。これは、event.preventDefault（）メソッドを使用して、今回はデフォルトのクリックアクションがトリガーされないようにするためです。

例5：

falseを返す場合、3つの例があり、すべてがまったく同じことをしているように見えます（falseを返すだけです）が、実際には結果はかなり異なります。上記のそれぞれで実際に起こることは以下のとおりです。

ケース：

  1. インラインイベントハンドラからfalseを返すと、ブラウザはリンクアドレスに移動できなくなりますが、DOMを介したイベントの伝播は停止しません。
  2. JQueryイベントハンドラからfalseを返すと、ブラウザがリンクアドレスに移動できなくなり、DOMを介したイベントの伝播が停止します。
  3. 通常のDOMイベントハンドラからfalseを返すことは、まったく何もしません。

3つの例すべてが表示されます。

  1. インラインはfalseを返します。
<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>
  1. JQueryイベントハンドラからfalseを返します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='http://stackoverflow.com'>Click here to visit stackoverflow.com</a>
</div>
<script>
  $('a').click(function(event) {
    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });
  $('div').click(function(event) {
    alert('Div clicked');
  });
</script>
  1. 通常のDOMイベントハンドラーからfalseを返します。
<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

これらの例が明確であることを願っています。 htmlファイルでこれらの例をすべて実行して、どのように機能するかを確認してください。

126
Keval Bhatt