阻止瀏覽器的默認行為


下面介紹的兩種阻止方法,不僅僅阻止超鏈接的默認行為,也可用於其他標簽的默認行為,例如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);
                }
                
            }
        }    

效果:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM