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. zw版【转发·台湾nvp系列Delphi例程】HALCON TestObjDef

    zw版[转发·台湾nvp系列Delphi例程]HALCON TestObjDef procedure TForm1.Button1Click(Sender: TObject);var img : HU ...

  2. 【fedora】设置fedora系统

    1.安装自动选择最快源的插件fastestmirror: #sudo yum -y install axel yum-plugin-fastestmirror && sudo yum ...

  3. Maven（一）

    Maven学习总结(一)——Maven入门 一.Maven的基本概念 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的 ...

  4. Python标准库之核心模块学习记录

    内建函数和异常 包括__builtin__模块和exceptions模块 操作系统接口模块 包括提供文件和进程处理功能的os模块,提供平台独立的文件名处理(分拆目录名,文件名,后缀等)的os.path ...

  5. 161111、NioSocket的用法（new IO）

    今天先介绍NioSocket的基本用法,实际使用一般会采用多线程,后面会介绍多线程的处理方法. 从jdk1.4开始,java增加了新的io模式--nio(new IO),nio在底层采用了新的处理方式 ...

  6. printf,sprintf,vsprintf 区别【转】

    转自:http://blog.csdn.net/anye3000/article/details/6593551 有C语言写作历史的程序员往往特别喜欢printf 函数.即使可以使用更简单的命令(例如 ...

  7. Java中类方法与实例方法的区别

    实例方法可以对当前对象的实例变量进行操作,也可以对类变量进行操作,但类方法不能访问实例变量.实例方法必须由实例对象来调用,而类方法除了可由实例对象调用外,还可以由类名直接调用. 另外,在类方法中不能使 ...

  8. while DEMO

    while DEMO #!/bin/bash #author:xiluhua #since: let v_count= " ] do ] then sleep echo $v_count l ...

  9. C# winform 中MessageBox用法大全（附效果图） （转载+说明）

    声明:这篇文章是转载的转载的,由于原作者的博客被关闭 我就不再列出了,提前先说明下,if语句中的判断有些太长,建议提前声明一个变量, DialogResult MsgBoxResult;        ...

  10. postgresql 热备与恢复

    一. PostgreSQL热备份的过程一般为: 数据库中执行:pg_start_backup() ; 然后使用操作系统的tar或 cp命令拷贝 PostgreSQL数据文件. 数据库中执行:pg_st ...