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. 老李推荐：第4章1节《MonkeyRunner源码剖析》ADB协议及服务: ADB协议概览 1

    老李推荐:第4章1节<MonkeyRunner源码剖析>ADB协议及服务: ADB协议概览   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试, ...

  2. 老李分享：Android性能优化之内存泄漏1

    老李分享:Android性能优化之内存泄漏   前言 对于内存泄漏,我想大家在开发中肯定都遇到过,只不过内存泄漏对我们来说并不是可见的,因为它是在堆中活动,而要想检测程序中是否有内存泄漏的产生,通常我 ...

  3. CF #401 (Div. 2) E. Hanoi Factory (栈+贪心)

    题意:给你一堆汉诺塔的盘子,设内半径为a,设外半径为b,高度为h,如果bj ≤ bi 同时bj > ai 我们就认为i盘子能落在在j盘子上,问你最高能落多高 思路:一看题意我们就能想到贪心,首先 ...

  4. js按值传递和按引用传递

    摘要:js的数据类型有种划分方式为 原始数据类型和 引用数据类型. 原始数据类型 存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置.栈区包括了 变量的标识符和变量的值. ...

  5. [编织消息框架][JAVA核心技术]动态代理应用10-水平扩展方案

    服务分为系统服务同用户服务两种 水平扩展是基于系统服务,而拆分方式又有几种方案,按数据跟业务情况来做决策 1.每个服务独立存储(图1):每个服务只负责一个或多个领域实体存储,A服务不能直接修改B服务的 ...

  6. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  7. OpenCV 玩九宫格数独（二）：knn 数字识别

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:刘潇龙 前言 首先需要说明,这里所说的数字识别不是手写数字识别! 但凡对机器学习有所了解的人,相信看到数 ...

  8. 【日常】C++ 的那些“坑” —— delete 与 析构函数 与 virtual 的 9 个小例子

    C++中有无数的坑,但毕竟-- 今天就踩到了,也算是基本问题了,记录一下,顺便以后可以考考自己.你也可以猜猜答案,大牛绕行. 0x1 先看这个: #include <stdio.h> #i ...

  9. MySQL常见建表选项以约束

    一.CREATE TABLE 选项 1.在定义列的时候,指定列选项 1)DEFAULT <literal>:定义列的默认值 当插入一个新行到表中并且没有给该列明确赋值时,如果定义了列的默认 ...

  10. 清北Day 2

    清北第二天,感受到了来自这个世界的不友善,大概把没听过不会的"名词"记录下来就已经一面了,然后被大佬说这都是最基础的东西,就很皮,那就趁别人练习字符串的题的时候,来写波博客了,倒不 ...