javascript中return false;preventDefault()stop Pragation()の違い

13045 ワード
JavaScript
主な内容:
  • 違いの紹介
  • コードのデモの違い
  • 提案
    •  
    1.違いの紹介
    私たちは通常のコードの中で、javascriptではよく「return false」という文を使ってイベントの向上伝達を阻止していますが、実は「return false」という文は2つの意味が含まれています.
  • は、イベントをトリガする要素のデフォルト動作(例えば、1つのlink(http://www/baidu.com"></a])を阻止し、そのデフォルト動作はbaiduトップページに移ることである)
  • は、トリガ・イベントの要素の上向き転送を停止する
    • .
     
    二つの意味が含まれていますので、まず上の二つのブロックが私たちの予想に合っているかどうかを明確にします.
    要素のデフォルト動作を阻止したいだけか、または要素の上へのイベントの伝達を阻止したいだけで、「return false」を誤用したら、
    大量のコードの中ではデバッグが難しいです.
    javascriptにはそれぞれの関数があります.上の2つのブロックをそれぞれ実現します.それぞれ:
  • event.preventDefault()トリガ・イベントの要素をブロックするデフォルト動作
  • event.stop Pragation()  イベントをトリガする要素を上に移動させることを阻止する
    • .
     
    2.コードのプレゼンテーションの違い
    以下は5つのケースに分けてコードで[return false],[preventDefault],[stopPragation()の違いを示します.
    htmlコード:
    <!DOCTYPE>
<html xml:lang="zh" lang="zh">
    <head>
        <title>test js     </title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript" src="my.js"></script>
        <style type="text/css" media="screen">
          #parent{
          width:300px;
          height:300px;
          boder:1px;
          background-color:red;
          margin-left:auto;
          margin-right: auto;
          }
          #child{
          width:200px;
          height:200px;
          margin-left:auto;
          margin-right: auto;
          boder:1px;
          background-color:blue;
          }
        </style>
    </head>
    <body>
      <div id="parent">
          <div id="child">
            <a href="http://www.baidu.com" id="lnk">go to baidu!</a>
          </div>
      </div>
    </body>
</html>
     
    場合によっては、[return false],[prevent Default],[stop Pragation]]は使用しません.
    デフォルトのmy.jsのコードは以下の通りです.
    // init
$(function(){
    $("#parent").bind('click', fun_p);
    $("#child").bind('click', fun_c);
    $("#lnk").bind('click', fun_a);

});

function fun_p()
{
    alert('parent');
}

function fun_c()
{
    alert('child');
}

function fun_a()
{
    alert('link');
}
    ブラウザでhtmlファイルを開き、その中のリンクをクリックして、以下の操作を順次実行します.
  • により、linkのclickイベントalert
    • がトリガされる.
  • は、clickイベントを父要素div(idがchildであるdiv)に伝達し、このdivのclickイベントalert('child')
    • をトリガする.
  • は、clickイベントを父要素div(idはparentのdiv)に伝え続け、このdivのclickイベントalert('parent')
    • をトリガする.
  • は、linkのデフォルト動作、すなわちbaiduトップページ
    • に移動する.
     
    場合二、［return false］を使用する.
    my.jsのfunction funualに1行追加します.
    function fun_a()
{
    alert('link');
    return false;
}
    ブラウザでhtmlファイルを開き、その中のリンクをクリックして、以下の操作を順次実行します.
    1.linkをトリガするclickイベントalert('link')
    ケースの中の2～4ステップは阻止されました.
     
    場合三、［preventDefault()］を使用する.
    my.jsのfunction funualに[event.prevent Default]]を追加します.
    function fun_a()
{
    alert('link');
    event.preventDefault();
}
    ブラウザでhtmlファイルを開き、その中のリンクをクリックして、以下の操作を順次実行します.
  • により、linkのclickイベントalert
    • がトリガされる.
  • は、clickイベントを父要素div(idがchildであるdiv)に伝達し、このdivのclickイベントalert('child')
    • をトリガする.
  • は、clickイベントを父要素div(idはparentのdiv)に伝え続け、このdivのclickイベントalert('parent')
    • をトリガする.
    linkのデフォルト動作は関数[preventDefault()によって阻止されました.
     
    場合四、[stopPragation()を使用します.
    my.jsのfunction funualに[event.stopPragation]]を追加します.
    function fun_a()
{
    alert('link');
    event.stopPropagation();
}
    ブラウザでhtmlファイルを開き、その中のリンクをクリックして、以下の操作を順次実行します.
  • により、linkのclickイベントalert
    • がトリガされる.
  • は、linkのデフォルト動作、すなわちbaiduトップページ
    • に移動する.
    上へイベントを送るのは関数[stopPragation]]によって阻止されました.
     
    ケース5は、[preventDefault()]と[stop Pragation()を同時に使用する.
    my.jsのfunction funualに2行追加します.
    function fun_a()
{
    alert('link');
    event.preventDefault();
    event.stopPropagation();
}
    ブラウザでhtmlファイルを開き、その中のリンクをクリックして、以下の操作を順次実行します.
    linkをトリガするclickイベントalert('link')
    ケース2と同様に、「return false」は「preventDefault」と「stopPragation」の2つの機能が含まれていると説明しました.
     
    3.アドバイス
    できるだけ[preventDefault]と[stop Pragation]関数を使うことを提案します.
    確かに[return false]]を使うところでも、上の場合は5のように[preventDefault]と[stopPragation]で代替することができます.
    このように、コードの意味をより明確にし、読み取り可能性を向上させることができる.
    Returning functionモード