IE8不支持的PageXY   相对于整个页面鼠标的位置 包括溢出的部分

event.pageX;

event.pageY;

所有浏览器支持的： 相对于当前浏览器窗口可视区域的坐标
event.clientX;
event.clientY;

相对于当前屏幕（和浏览器窗口大小无关）的坐标
event.screenX;
event.screenY;

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        window.onload = function(){

            document.onmousemove = function(event){

                var event = event||window.event;

                var oDiv = document.getElementById("div1");

                function byName(name){

                    return document.getElementsByName(name)[0]

                }

                byName("pageX").value = event.pageX;

                byName("pageY").value = event.pageY;

                byName("clientX").value = event.clientX;

                byName("clientY").value = event.clientY;

                byName("screenX").value = event.screenX;

                byName("screenY").value = event.screenY;

                byName("scrollLeft").value = document.body.scrollLeft||document.documentElement.scrollLeft;

                byName("scrollTop").value = document.body.scrollTop||document.documentElement.scrollTop;

                //为了兼容IE8 所以才用下面的方法

                oDiv.style.top =event.clientY+(document.body.scrollTop||document.documentElement.scrollTop)+"px";

                oDiv.style.left =event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft)+"px";

                //oDiv.style.top =event.pageY+"px";

                //oDiv.style.left = event.pageX+"px";

            }

        }

    </script>

</head>

<body style=" height: 2000px;">

<div style="position:fixed;top:0;left:0;">pageX:<input type="text" name="pageX" />相对页面IE8以及更早版本不支持<br>

pageY:<input type="text" name="pageY" /><br>

clientX:<input type="text" name="clientX" />相对于网页的可视区域<br>

clientY:<input type="text" name="clientY" /><br>

screenX:<input type="text" name="screenX" />相对于屏幕，和浏览器窗口大小无关！<br>

screenY:<input type="text" name="screenY" /><br>

scrollTop:<input type="text" name="scrollTop" /><br>

scrollLef:<input type="text" name="scrollLeft" /><br>

</div>

<div id="div1" style="position:absolute; left:0;top:0; width:100px; height:100px; background:red;">1</div>

</body>

</html>

event对应的各种坐标的更多相关文章

  1. 鼠标事件event和坐标

    鼠标事件(e=e||window.event) event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标 ...

  2. ugui Event.current.mousePosition获取的坐标原点在左上角

    脚本里使用OnGUI(),在鼠标按下时出发EventType.MouseDown事件,此时如果观察Event.current.mousePosition的坐标原点时左上角,即鼠标按下的点越靠近左上角, ...

  3. #event.initMouseEvent

    initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值.此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前 ...

  4. Event 对象

    哪个鼠标按钮被点击? <html> <head> <script type="text/javascript"> function whichB ...

  5. js 实现的页面图片放大器以及 event中的诸多 x

    背景: 淘宝.天猫等电商网站浏览图片时可以查看大图的功能: 思路: 思路很简单,两张图片,一张较小渲染在页面上,一张较大是细节图,随鼠标事件调整它的 left & top; 需要的知识点: o ...

  6. JS事件（四）坐标位置

    1.客户区坐标位置  (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pa ...

  7. html页面中event的常见应用

    一:获取键盘上某个按键的unicode值 <html> <head> <script type="text/javascript"> funct ...

  8. Javascript防冒泡事件与Event对象

    防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...

  9. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

随机推荐

  1. 云计算+SaaS+业务开发平台=JSAAS云平台

    我关注Google的代码托管.Open API,我也关注Oracle会把MYSQL怎么样云数据库化,我也虚拟化技术多实例化独立的数据库,我也关注facebook的平台插件应用架构,我也关注salesf ...

  2. c/c++程序员的技术栈

    在当今的互联网时代, java,  安卓, ios, 大行其道,而c/c++却显得越来越落寞. 其实这并不是c/c++程序员本身的问题,而是这是一个产品快速响应市场的年代.用过c/c++的人都知道, ...

  3. Bootstrap基础学习(一)—表格与按钮

    一.Bootstrap 概述      Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...

  4. Executor以及线程池

    在应用程序中,总是会出现大量的任务,包括相同类型的和不同类型的.要快速处理这些任务,常见方法就是利用多线程,但是也不可能为每个任务都创建一个线程,这样内存也不够,并且线程的创建销毁开销很大.最好是少量 ...

  5. BZOJ2818 与 BZOJ2301【euler，线性筛，莫比乌斯】

    题目大意: 给一个范围[1,n],从中找出两个数x,y,使得gcd(x,y)为质数,问有多少对(x,y有序) 解法: 不难,欧拉函数练手题,可以定义集合P ={x|x为素数},那么我们枚举gcd(x, ...

  6. seo从业者发展方向

    对于很多朋友来说,seo就是一项比较简单的技能,内容+外链,就可以基本囊括seo的基本内容了.可能很多朋友对此不屑一顾,会说seo可是包含万象, 你需要懂网页设计.标签设计,分词优化.企业建站等等方面 ...

  7. jQuery使用小结

    $(document).ready( function(){} ); 选择器 $("p:first")            第一个元素 $("p.intro" ...

  8. 【HDOJ 1086】 模板水过

    You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3 ...

  9. SIP DB33标准笔记 监控图像获取

    实时监控图像的获取: a) 实时监控图像的获取过程应包括获取实时流.释放实时流.应使用 RFC 3261 中定义的方法INVITE 获取一个摄像机的实时监控视频流. 取消没有完成的连接应采用 CANC ...

  10. eNSP自学入门（基础）

    写了上篇博客之后,就立即投入到了eNSP的怀抱之中了,自己从零基础,入门到现在.也学了不少东西,在这里和大家分享一下. 说一下学习的过程吧,老师说做网络工程的课程设计用eNSP,关于这个软件什么都没有 ...