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查询所有表以及表名的模糊查询

    --1.查看所有表名:select name from sysobjects where type='U'--2.查找包含用户的表名,可通过以下SQL语句实现, Select * From sysob ...

  2. [tp3.2.1]让默认页面: 加载Home模块的Index控制器;而让admin.php默认去加载Admin模块的Adminc控制器.

    QQ:让index.php默认加载Home模块的Index控制器;而让admin.php默认去加载Admin模块的Adminc控制器.AA:复制index.php命名为admin.php复制(新建)A ...

  3. Openstack的镜像属性

    先来看张图: 容易理解的地方我们就不介绍了,我们这里介绍'公有'和'受保护'的 在shell命令中,公有用is-public=True表示,而受保护的用is-protected表示,公有的反面是is- ...

  4. linux下串口控制

    /*  本程序符合GPL条约  *  Beneboy 2003-5-16 */ #include <stdio.h>              // printf #include < ...

  5. STM32内存跟FLASH问题

    RO: 常量 ZI: 未初始化的全局变量 RW: 初始化的全局变量 Code: 程序本身 Code, RO-data,RW-data ..............flash RW-data, ZIda ...

  6. 【翻译】了解ASP.NET MVC的HTML助手

    原文:Understanding HTML Helpers in ASP.NET MVC 作 者:Shailendra Chauhan works as Software Analyst at rep ...

  7. Using Controls in a Form Design [AX 2012]

    Using Controls in a Form Design [AX 2012] This topic has not yet been rated - Rate this topic Update ...

  8. nexus启动不了

    nexus一分钟前还能正常启动,突然就启动不了,看了下启动文件,变成0KB就知道什么问题了,文件被系统洗了. 解决方案:重新解压缩文件包里复制一个过来.

  9. PHP获取不了React Native Fecth参数的解决办法是怎么样呢？

    fetch('https://mywebsite.com/endpoint/', { method: 'POST',headers: {'Accept': 'application/json','Co ...

  10. jquery easyui常见问题：

    1.jquery easyui1.4.2 demo在ie10 上加载json的时候没有效果 从官网上下载了jquery easyui1.4.2 里面有个demo文件夹,但是发现底下的demo在IE.3 ...