jsイベントのイベントpreventDefault()とevent.stopPropagation()用法の違い

多くの友達はeventと思っています.preventDefault()とevent.stopPropagation()はjqueryの方法ですが、実はそうではありません.js自身が持っている方法です.以下、学生の皆さんに簡単に2つの使い方と違いを紹介します.
event.preventDefault()の使い方の紹介
このメソッドは、イベントに関連付けられたデフォルトのアクションが存在する場合、Webブラウザに通知されます.たとえばtypeプロパティがsubmitの場合、イベント伝播の任意のフェーズで任意のイベントハンドルを呼び出すことができ、このメソッドを呼び出すことでフォームのコミットを阻止できます.Eventオブジェクトのcancelableプロパティがfasleの場合、デフォルトのアクションはないか、デフォルトのアクションをブロックできません.いずれの場合も、このメソッドを呼び出すのは役に立ちません.
このメソッドは、イベントに関連付けられたデフォルトのアクションが存在する場合、Webブラウザに通知されます.
たとえばtypeプロパティがsubmitの場合、イベント伝播の任意のフェーズで任意のイベントハンドルを呼び出すことができ、このメソッドを呼び出すことでフォームのコミットを阻止できます.
Eventオブジェクトのcancelableプロパティがfasleの場合、デフォルトのアクションはないか、デフォルトのアクションをブロックできません.いずれの場合も、このメソッドを呼び出すのは役に立ちません.
 
event.stopPropagation()の使い方の紹介
このメソッドは、イベントの伝播を停止し、他のDocumentノードに割り当てられないようにします.イベント伝播のどの段階でも呼び出すことができます.この方法では、同じDocumentノード上の他のイベントハンドルが呼び出されるのを阻止することはできませんが、他のノードへのイベントの割り当てを阻止することができます.
このメソッドは、イベントの伝播を停止し、他のDocumentノードに割り当てられないようにします.イベント伝播のどの段階でも呼び出すことができます.
注意:このメソッドは、同じDocumentノード上の他のイベントハンドルが呼び出されるのを阻止することはできませんが、他のノードへのイベントの割り当てを阻止することができます.
イベントはDOMのイベントメソッドなので、DOMを指定するなど、単独で使用するわけではありません.

/*  */
body.nav-tran .warp,body.nav-tran .bottom_btn{
    -webkit-transform: translate(-8rem, 0);
    -moz-transform: translate(-8rem, 0);
    -ms-transform: translate(-8rem, 0);
    -o-transform: translate(-8rem, 0);
    transform: translate(-8rem, 0);
}
body.nav-tran .nav{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.warp,.nav,.bottom_btn{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

function nav(){
    var btn=$(".nav-btn");
    var warp=$(".warp");
    btn.on("touchstart",function(event){
        $("body").addClass("nav-tran");
        event.stopPropagation();
        //return false;
    });
    warp.on("touchstart",function(){
        $("body").removeClass("nav-tran");
    });
}