zoukankan      html  css  js  c++  java
  • 阻止浏览器的默认行为

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

    效果:

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

  • 相关阅读:
    [APIO2012]派遣
    Luogu_2774 方格取数问题
    Luogu4149 [IOI2011]Race
    Luogu_4886 快递员
    Loj_6282. 数列分块入门 6
    LOJ 6281 数列分块入门 5
    三维偏序 cdq
    【逆序对】 模板
    【luogu P1637 三元上升子序列】 题解
    【luogu P3609 [USACO17JAN]Hoof, Paper, Scissor蹄子剪刀布】 题解
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9600900.html
Copyright © 2011-2022 走看看