FF中的layerX、layerY和IE中的offsetX、offsetY

最新推荐文章于 2023-02-27 22:43:58 发布

chaoguo1234

最新推荐文章于 2023-02-27 22:43:58 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/chaoguo1234/article/details/81277514

版权

layerX和layerY以及offsetX和offsetY是来获取相对于触发事件发生的元素上，鼠标的坐标位置的，但是两者却有不同。

下面是测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>offsetX</title>
        <style type = "text/css">
        html {
           margin: 20px;
           border:3px solid red;
           padding: 20px;
        }
        /*body的边框为橙色*/
        body {
            padding: 20px;
            margin: 20px;
            border: 1px solid orange;
        }
        /*蓝色边框div*/
        #wrapper {
            padding: 20px;
            margin: 0;
            border: 1px solid blue;
            width: 500px;
            
        }
        /*绿色边框的div*/
        #div1 {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            background: gold;
            margin-bottom: 20px;
        }
        /*嵌套在绿色边框里面的红色边框div*/
        #div1_1 {
            width: 100px;
            height: 100px;
            border: 3px solid green;
            padding: 0;
            margin: 49px;;
            background: silver;
            
            
        }
        /*黑色边框div，用来显示*/
        #div2 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        #div3 {
            margin: 1000px;
        }
        </style>
        <!--myUtil.js是外部js文件-->
        <script type = "text/javascript" src = "myUtil.js"></script>
        <script type = "text/javascript">
            function test() {
                myUtil.addEvent("div1", "mousemove", function(event) { 
                    event = myUtil.getEventObject(event); 
                    var div2 = myUtil.byId("div2"); 
                    div2.innerHTML = "X: " + (event.offsetX || event.layerX) + " Y: " + (event.offsetY || event.layerY) + "<br />"
                        + "height: " + myUtil.getComputedStyle("div1", "height") + " width: " + myUtil.getComputedStyle("div1", "width");
                });
            
                
            }
        </script>
        
    </head>
    <body onload = "test()">
    
    <div id = "wrapper">
    <div id = "div1"><div id = "div1_1"></div></div>
    <div id = "div2"></div>
    </div>
    </body>
</html>

整个代码运行后的效果:

最外层的红色边框时html根元素(有20px的margin)

第二层的橙色边框时body元素

第三层蓝色边框是id为wrapper的div框

红色边框，金黄色背景是id为div1的div框

绿色边框，银色背景是id为div1_1的div框

黑色边框为id为div2的显示div框

FF中的layerX和layerY

在火狐中，坐标系的原点位于文档的左上角(也就是地址栏下面的左上角，不是红色边框的左上角),在火狐中所有的坐标值都是以它为参照。能够产生坐标值的区域是鼠标在金黄色背景的div框(id值为div1)上滑动的时候(包括在它红色边框上，以及里面的子元素上，但是不包括它的外边距)。在上面所说的任意地方滑动，所得的坐标值都以上面所说的坐标原点为准。

IE的offsetX和offsetY

在IE8中，坐标原点位置和在火狐中的不一样，并且鼠标在父元素上滑动与在子元素上滑动坐标原点也不一样。在IE8中如果在父div框上滑动(就是金黄色背景的div，id为div1),坐标原点位于父div框左上角上padding与border的交界处。而在子div框(银色背景的div框，id为div1_1)上滑动的时候,坐标原点移动到了子div框左上角padding与border的交界处。能够产生坐标值的地方与在火狐中的一样，但是由于坐标原点的位置与火狐不同，因此可能产生负值(当在上边框和左边框上滑动的时候)或者值为undefined(当鼠标处于上边框或者下边框与padding的交界处时)。

注意:测试用的html文件必须包含dtd文件，否则可能结果不一样(因为dtd文件影响到浏览器对盒模型的解释，详情参阅《FF、IE、Opera中盒模型的差异》)

源文件.rar