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. sql 索引创建

    --格式 --CREATE [索引类型] INDEX 索引名称--ON 表名(列名)--WITH FILLFACTOR = 填充因子值0~100--GO ----------------------- ...

  2. 夺命雷公狗---node.js---6net模块玩telnet通信（下）

    我们来升级玩玩,废话不多说,代码如下所示: /** * Created by leigood on 2016/8/12. */ var net = require('net'); var ChatSr ...

  3. 《zw版·ddelphi与halcon系列原创教程》Halcon的短板与delphi

    [<zw版·delphi与Halcon系列原创教程>Halcon的短板与delphi 看过<delphi与Halcon系列>blog的网友都知道,笔者对Halcon一直是非常推 ...

  4. SQL2005中的事务与锁定（二）- 转载

    ------------------------------------------------------------------------ -- Author : HappyFlyStone  ...

  5. SQL Server 数据查询 整理

    一.使用SELECT检索数据 数据查询是SQL语言的中心内容,SELECT 语句的作用是让数据库服务器根据客户要求检索出所需要的信息资料,并按照规定的格式进行整理,返回给客户端. SELECT 语句的 ...

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

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

  7. BlueDroid介绍 【转】

    转自:http://blog.csdn.net/fen_liu/article/details/41213167 [-] 基本结构 代码区 http://www.cnblogs.com/hzl6255 ...

  8. Makefile，如何传递宏定义DEBUG【转】

    转自:http://blog.csdn.net/linuxheik/article/details/8051598 版权声明:本文为博主原创文章,未经博主允许不得转载. Makefile,如何传递宏定 ...

  9. android:layout_gravity和android:gravity属性的区别

    一.介绍: gravity的中文意思就是”重心“,就是表示view横向和纵向的停靠位置 (1).android:gravity:是对view控件本身来说的,是用来设置view本身的内容应该显示在vie ...

  10. Dynamics AX 2012 R2 外部程序运行在没有AD的环境(如PDA) 调用AX服务

        Reinhard对这个问题研究了很久,也查了一些资料,整理了三种解决方案. 1.准备一台虚拟机A,A加入到了AD活动域,可以操作AX. PDA以远程桌面的方式,连接到虚拟机A. 在虚拟机上运行 ...