html a如何取消默认行为,js取消浏览器默认事件行为的2种方法

首先我们来说明下，何为DOM浏览器默认事件？

简单的说DOM​默认事件。即DOM元素在浏览器里本身具备的功能。举个简单的例子：a标签我们点击下，就会跳转到另外一个页面，表单的提交按钮，当百度

js

var skip = document.getElementById("next");

skip.onclick = function(event){

event.preventDefault();

};

event.preventDefault阻止表单提交

在提交表单之前我们通常都需要验证下表单里的一些必填字段是否填写，如果没有填写，则提示用户填写，表单不提交，必填字段全部填写了，才进行表单数据提交。

需求：如果输入的字符小于6位则提示用户

实现：

var form=document.getElementById("form");

var text=document.getElementById("text");

var tishi=document.getElementById("tishi");

form.οnsubmit=function(event){

var val=text.value;

if(val.length<6){

tishi.innerHTML="长度小于6";

event.preventDefault();

};

};

如果input的长度小于6就会提示错误。作为提交表单验证阻止默认是必须的。

但是：event.preventDefault()在低级ie存在不兼容问题

那有更健全的方法吗？当然有了，return false 登场

return false阻止默认行为

还是拿上面的例子，return false阻止表单提交

var form=document.getElementById("form");

var text=document.getElementById("text");

var tishi=document.getElementById("tishi");

form.οnsubmit=function(event){

var val=text.value;

if(val.length<6){

tishi.innerHTML="长度小于6";

return false;

};

};

其他代码一样，仅仅只是将 event.preventDefault() 改为 return false;

event.preventDefault()和return false对比

event.preventDefault 测试

var form=document.getElementById("form");

var text=document.getElementById("text");

var ti=document.getElementById("ti");

form.οnsubmit=function(event){

var val=text.value;

if(val.length<6){

ti.innerHTML="长度小于6";

event.preventDefault();

alert("我在阻止后弹出！")

};

};

执行以上代码，我们会发现1、不会提交跳转，2、alert弹出了。

return false

var form=document.getElementById("form");

var text=document.getElementById("text");

var tishi=document.getElementById("tishi");

form.οnsubmit=function(event){

var val=text.value;

if(val.length<6){

tishi.innerHTML="长度小于6";

return false;

alert("我在阻止后弹出！")

};

};

执行以上代码，我们会发现1、不会提交跳转，2、alert不执行了。

我们知道return一经使用就是程序终止,带有break的作用。