坐标位置小结

设置一个有滚动条的页面

 

css

        body {
            height: 1000px;
        }
        #div1 {
            height: 300px;
            width: 300px;
            background: red;
        }

js

        var div = document.getElementById('div1');
        window.onclick = function(e) {        //若document.body小于视区，点击超出的位置就无法获取。而window可以
            var e = e || window.event;
            // alert(e.clientX + ',' + e.clientY);       //这个是相对于浏览器的位置，不包含已滚动的位置  ->视区位置
            // alert(e.pageX + ',' + e.pageY);       //这个是页面page的位置，包含已滚动的位置  ->文档位置
            // alert(e.screenX + ',' + e.screenY);    //这个是相对于屏幕坐标位置
　　　　　　  //ie8下不支持页面坐标，要用客户区坐标+滚动信息得到   滚动两种分别是混杂模式和标准模式中的scroll信息
            var x = document.body.scrollLeft || document.documentElement.scrollLeft + e.clientX;     
            var y = document.body.scrollTop || document.documentElement.scrollTop + e.clientY;
            alert(x + ',' + y);
        }