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。