阻止浏览器的默认行为

下面介绍的两种阻止方法，不仅仅阻止超链接的默认行为，也可用于其他标签的默认行为，例如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);
                }
                
            }
        }

效果：

可以看到可以根据需求跳转。