js事件之event.preventDefault()与event.stopPropagation()用法区别

很多朋友都以为event.preventDefault()与event.stopPropagation()是jquery的方法，其实不是的它们是js本身自带的方法了，下面我来给各位同学简单介绍它们两的用法与区别了。

event.preventDefault()用法介绍

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如， 如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。

注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

 

event.stopPropagation()用法介绍

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。

注意:虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

event是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");
    });
}