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. 设置ssh只允许用户从指定的IP登陆

    假设 我们公司的固定IP是  183.21.89.249   连接上我们自己进行管理的服务器   然后编辑ssh的配置文件默认  /etc/ssh/sshd_config   在文件最后面另起一行添加 ...

  2. 老李分享：webservice是什么？

    老李分享:webservice是什么?   前言 Web Services 是 Web 应用出于和其他 Web 应用以交互数据为目的的开放式标准(XML.SOAP.HTTP 等).Web Servic ...

  3. python_原始_web框架

    创:10_4_2017 修: 什么是web框架? -- 本质上是socket,用户请求来,业务逻辑处理,返回处理结果 -- 包含socket或者不包含socket的框架 什么是wsgi? -- web ...

  4. 脚本语言：Xmas（二）

    本篇,来谈谈类型系统,以及部分与垃圾收集器相关的内容. 一.基本类型 Xmas的基本类型:Null.Boolean.Label.String.Ref.Function.Integer.Float.De ...

  5. .exe简单的更新软件demo

    百度网盘源码加文件:http://pan.baidu.com/s/1qYe2Vgg 功能:通过网站更新用户的软件,需要联网,也可以通过本地网站更新局域网用户软件. 根本实现:1.一个网站(本地就可以) ...

  6. android studio 2.3 下载地址

      android studio下载:  Windows+SDK:(1.8GB)| Windows(428 MB) | Linux    idea  win.exe  win.zip 序号 名称 中文 ...

  7. mpush 服务器环境配置安装 CentOS 7 and Windows

    github-doc https://github.com/mywiki/mpush-doc/blob/master/SUMMARY.md Introduction 1.服务器环境 2.安装Redis ...

  8. file_get_contents HTTP request failed! Internal Server Error

    使用file_get_contents报错 Severity: WarningMessage: file_get_contents(http://geetest.com:8000/select?gid ...

  9. LVS + keepalived(DR) 实战

    一.LVS体系结构 使用LVS架设的服务器集群系统有三个部分组成:最前端的负载均衡层,用Load Balancer表示,中间的服务器群组层,用Server Array表示,最底端的数据共享存储层,用S ...

  10. WEB认证模式：Basic & Digest

    一. HTTP Basic 客户端以" : "连接用户名和密码后,再经BASE64加密通过Authorization请求头发送该密文至服务端进行验证,每次请求都需要重复发送该密文. ...