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);
                    }
                    
                }
            }    

    效果:

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

  • 相关阅读:
    Python编码和文件操作
    Python的list和tuple及dictionary
    Python代码对比
    python的基础知识
    day2 springcloud组件(nacos注册/配置中心 feign组件请求调用 gateway网关)
    springcloud与springboot版本对应关系
    git配置
    day1 分布式基础概念
    spring中的依赖注入(DI)笔记
    20210223 爱生气的书店老板(滑动窗口)
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9600900.html
Copyright © 2011-2022 走看看