1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
      可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
3.screenX/screenY：鼠标在屏幕上的位置,从屏幕左上角开始（w3c标准）
4.offsetX/offsetY:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
5.
layerX/layerY：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点

chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)

下面这个是获取相对于屏幕的坐标
document.onmousemove=function(e){e=e? e:window.event;document.writeln("X:"+e.screenX+"Y:"+e.screenY);}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_0922w.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        function getScreen(event) {

            document.getElementById("container").innerHTML = event.offsetX + " , " + event.offsetX;

        }

    </script>

    <style>

        #container {

        left:0px;

        bottom:0px;

        text-align:left;

        width:293px;

        height:190px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div onmousemove="getScreen(event)" id="container">

        <asp:Image ID="Image1" runat="server" ImageUrl="~/image/1152165471 - 副本.jpg" />

    </div>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    </form>

</body>

</html>

js获取鼠标位置的更多相关文章

  1. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  2. js获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  3. js 获取 鼠标位置 和获取元素位置

    ]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...

  4. js如何获取鼠标位置

    获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...

  5. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 兼容IE FF 获取鼠标位置

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  7. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  8. C++获取鼠标位置及全局检测鼠标行为

    1.获取鼠标位置(在屏幕的位置)  CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...

  9. jquery 获取鼠标位置

    //获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...

随机推荐

  1. 夺命雷公狗ThinkPHP项目之----企业网站16之文章批量删除的完成

    我们在做一个网站时候经常会遇到批量删除这个选项,其实也很简单,我们之需要用用jq实现出来效果然后通过表单post过去后端即可实现: 我们做这个功能前必须要先引入jq,我的jq版本是1.8.3,方法如下 ...

  2. IE7/8浏览器都不能显示PNG格式图片

    方法一:重新注册pngfilt.dll文件.这个方法是PNG格式开发商官方网站上的推荐方法之一,抱着试试的想法按网站推荐的方法试了,一试成功.方法如下:使用 开始->运行,在运行输入框中输入 “ ...

  3. EF数据库连接时候出错

    users: EntityType: EntitySet 'users' is based on type 'UserModel' that has no keys defined. TreeLaye ...

  4. window7快捷键

    新建文件夹:Shift +F10  松手  shift  + w 两遍 Enter   shift+F   Enter

  5. python paramiko ssh.exec_command()启动tomcat服务器应用进程失败问题解决方法- Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable is needed to run this progr

    问题说明:

  6. office 2016 专业增强版 和 visio 2016 专业版 下载安装（附带激活工

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://babyshen.blog.51cto.com/8405584/1697910 o ...

  7. android studio自动导包

    http://blog.csdn.net/buaaroid/article/details/44979629 关于导包的设置以上博文解释的很清楚,在此主要强调下这一句: Add unambiguous ...

  8. LeetCode----67. Add Binary(java)

    package addBinary67;/* Given two binary strings, return their sum (also a binary string).For example ...

  9. cocos2dx资源和脚本加密quick-lua3.3final

    一.资源加密 版本号:Quick-Cocos2d-x 3.3 Final 调试工具:xCode 工程创建的时候选择的拷贝源码. 项目结构如图: 这个功能七月大神在很早之前就已经实现了,但是在3.3版本 ...

  10. JavaScript DOM 编程艺术（第2版）读书笔记（4）

    案例研究:JavaScript 图片库 改变图片的src属性的两种方式: 1,setAttribute方法是“第1级DOM”的组成部分,它可以设置元素节点的任意属性. 2,element.src = ...