js阻止默认行为 | 易学教程

一.哪些默认行为要做阻止

1.a标签链接跳转

什么是默认行为？一个最简单的例子，我有一个a标签：

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

我们预览打开，点击百度两个字就会打开百度页面，点击后链接地址跳转就是a标签的默认行为。

我们有没有办法在a点击后让他不跳转的处理呢？这是肯定有的，a在点击会触发click事件，我们只要在回调中加入事件阻止方法就可以阻止跳转发生：

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

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

再次点击百度，还会停留在当前页面，当然除了调用事件对象的阻止方法还可以用下面的处理：

skip.onclick=function(event){
 return false;
};

2.form表单提交

除了a的默认跳转行为，其实表单的提交行为很多时候我们也要进行阻止，当然是因为有表单验证了，因为输入问题而去阻止提交：

<form action="11.html" id="form">
<input type="text" id="text">
<span id="ti"></span>
<input type="submit">
</form>

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();
 }; 
};

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

event.preventDefault();在低级ie存在不兼容问题，但是return false是兼容的。

结论：

阻止默认行为方法1（高级浏览器/w3c标准的）：event.preventDefault()

阻止默认行为方法2：return false

二.event.preventDefault()和return false对比

还是对表单处理做修改：

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("我在阻止后弹出！")
 }; 
};

不会提交跳转，并且弹出了后面的程序。

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";
  return false;
  alert("我在阻止后弹出！")
 }; 
};

不会提交跳转，不过后面程序不会执行，我们知道return一经使用就是程序终止，带有break的作用。

有人会想，我return 别的会不会也阻止跳转：

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";
  return 0;
  alert("我在阻止后弹出！")
 }; 
};

很遗憾，提交成功了。

结论：

只有返回false才会阻止，与return自带break处理无关，阻止行为只是判断你返不返回false。

来源：oschina

链接：https://my.oschina.net/u/2352644/blog/638717

标签

e.preventDefault()