下面介紹的兩種阻止方法,不僅僅阻止超鏈接的默認行為,也可用於其他標簽的默認行為,例如img標簽的
禁止拖拽行為等,也是可以用這種方法阻止的。
這里只是用a標簽的默認跳轉行為來說明問題。
--阻止a超鏈接的默認行為(跳轉)-----------
講解示例中用到的html
html結構:
<body> <a href="http://www.baidu.com" id="a">百度</a> </body>
//我們都知道點擊html結構中的百度就會跳轉到百度,我們怎樣才能阻止
//這種行為呢?最少可以詢問我們一下是否跳轉?方法如下
//阻止超鏈接直接跳轉
window.onload = function(){ var oA = document.getElementById('a'); //阻止a鏈接的跳轉 --主要代碼---; oA.onclick = function(){ return false; } //阻止a鏈接的跳轉 --主要代碼end---; }

//通過上面的方法直接在a對象的點擊事件函數 retuen false;
window.onload = function(){ var oA = document.getElementById('a'); //阻止a鏈接的跳轉 --主要代碼---; oA.onclick = function(){ return false; }
//效果如上圖
//
//下面是阻止超鏈接跳轉的對象屬性
//e.prentDefault() 方法阻止 谷歌火狐的方法
//e.returnValue=false; 方法阻止 IE8以下的方法
//e.prentDefault() 方法阻止
window.onload = function(){
var oA = document.getElementById('a');
//阻止a鏈接的跳轉 --主要代碼---;
oA.onclick = function(ev){
var e = ev || window.event;
e.preventDefault();
}
}
//e.returnValue=false; 方法阻止
//e.returnValue=false; 方法阻止 window.onload = function(){ var oA = document.getElementById('a'); //阻止a鏈接的跳轉 --主要代碼---; oA.onclick = function(ev){ var e = ev || window.event; e.returnValue = false; } }
封裝兼容不同瀏覽器的寫法
/*--------------------封裝兼容不同瀏覽器的寫法------------*/ //ev 為事件對象 function preDef(e){ if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } /*------封裝阻止超鏈接的默認行為兼容不同瀏覽器的寫法end-------*/
調用測試
//調用測試 window.onload = function(){ var oA = document.getElementById('a'); //阻止a鏈接的跳轉 --主要代碼---; oA.onclick = function(ev){ var e = ev || window.event; preDef(e);//調用 } } //結果成功阻止了超鏈接的跳轉
*/ //結果成功阻止了超鏈接的跳轉
//我們再加上一個詢問框,這樣就得到了文章開頭的效果
window.onload = function(){ var oA = document.getElementById('a'); //阻止a鏈接的跳轉 --主要代碼---; oA.onclick = function(ev){ var e = ev || window.event; var res = confirm('你確定要跳轉嗎?') if(!res){//如果點擊了取消就阻止 preDef(e); } } }
效果:

可以看到可以根據需求跳轉。
