阻止浏览器的默认行为
下面介绍的两种阻止方法，不仅仅阻止超链接的默认行为，也可用于其他标签的默认行为，例如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); } } }
效果：
可以看到可以根据需求跳转。
