js取消浏览器默认事件行为的2种方法

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

简单的说DOM​默认事件。即DOM元素在浏览器里本身具备的功能。举个简单的例子：a标签我们点击下，就会跳转到另外一个页面，表单的提交按钮，当<input type="submit”>的时候，我们点击下，表单数据就会提交到form表单里action设置的网址里。这些都是浏览器的默认行为。

有时候我们的需求就是需要阻止这些默认行为的发生，这时候怎么办呢？

event.preventDefault阻止默认行为

如何阻止点击A标签跳转

html

<a href="https://www.baidu.com/" target="_blank" id="next">百度</a>

js

var skip = document.getElementById("next");
skip.onclick = function(event){
 event.preventDefault();
};

亲自体验一下

event.preventDefault阻止表单提交

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

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

实现：

<form action="11.html" id="form">
  <input type="text" id="text">
  <span id="tishi"></span>
  <input type="submit" value="提交">
</form>
<script>
var form=document.getElementById("form");
var text=document.getElementById("text");
var tishi=document.getElementById("tishi");
form.onsubmit=function(event){
 var val=text.value;
 if(val.length<6){
    tishi.innerHTML="长度小于6";
    event.preventDefault();
 }; 
};
</script>

亲自体验一下

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

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

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

return false阻止默认行为

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

<form action="11.html" id="form">
  <input type="text" id="text">
  <span id="tishi"></span>
  <input type="submit" value="提交">
</form>
<script>
var form=document.getElementById("form");
var text=document.getElementById("text");
var tishi=document.getElementById("tishi");
form.onsubmit=function(event){
 var val=text.value;
 if(val.length<6){
    tishi.innerHTML="长度小于6";
    return false;
 }; 
};
</script>

其他代码一样，仅仅只是将 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.onsubmit=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.onsubmit=function(event){
 var val=text.value;
 if(val.length<6){
  tishi.innerHTML="长度小于6";
  return false;
  alert("我在阻止后弹出！")
 }; 
};

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

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