首页 > 其他 > 详细

兼容低版本浏览器的一些方法

时间:2016-05-17 22:40:08      阅读:213      评论:0      收藏:0      [点我收藏+]
  • 页面滚动的兼容方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>

</body>
</html>
<script>

    window.onscroll = function () {
        document.title = scroll().top;
    }

    /*正常浏览器(除了ie678之外的浏览器)
     window.pageYOffset
     已经声明DTD(标准模式)
     document.documentElement.scrollTop
     未声明 DTD(怪异模式)
     document.body.scrollTop*/



    //这个方法可以给调用者提供 页面被卷去的top值和left值
    function scroll() {
        if (window.pageYOffset != null) {
            return {
                "top": window.pageYOffset,
                "left": window.pageXOffset
            };
        } else if (document.compatMode == "CSS1Compat") {
            //说明是标准模式 有DTD
            return {
                "top": document.documentElement.scrollTop,
                "left": document.documentElement.scrollLeft
            };
        } else {
            return {
                "top": document.body.scrollTop,
                "left": document.body.scrollLeft
            };
        }
    }

</script>
  • 网页可视区client方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>

    window.onresize = function () {
        document.title = client().width;
    }

    /*正常浏览器(包括IE9+)
     window.innerWidth
     标准模式(包括IE9-)
     document.documentElement.clientWidth
     怪异模式
     document.body.clientWidth*/

    //返回一个对象 如果用可视区的宽度 就.width 如果用高度就 .height
    function client() {
        if (window.innerWidth != null) {
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        } else if (document.compatMode == "CSS1Compat") {
            //标准模式
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        } else {
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }


</script>
  •  兼容ie6、7、8获取鼠标的坐标方法

function (event) {
        var event = event || window.event;

        //event.clientX//相对于客户端的位置
        //event.pageX//相对于页面的位置
        //event.screenX//相对于屏幕的位置

        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    }
  •  阻止事件冒泡

var event = event || window.event;
        if (event && event.stopPropagation) {//短路表达式
            //说明是正常浏览器
            event.stopPropagation();
        } else {
        //兼容ie678
            event.cancelBubble = true;
        }
  •  事件目标兼容性 

  targetId(排除事件触发案例)

返回当前事件对象的id

火狐谷歌等 event.target.id

IE678      event.srcElement.id

 var targetId = event.target ? event.target.id : event.srcElement.id;

 

 

 

兼容低版本浏览器的一些方法

原文:http://www.cnblogs.com/goweb/p/5484173.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!