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. mongodb聚合内存不足解决方案

    原因:mongodb每一个文档默认只有16M.聚合的结果是一个BSON文档,当超过16M大小时,就会报内存不够错误. exceeded memory limit for $group.but didn ...

  2. 三层与MVC

    三层架构(3-tier architecture) 我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真相. 首先,它俩根本不是一个概念. 三层架构是一 ...

  3. 在desk于webi中资料查询不一致

    1,首先检查是否勾选重复列,重复列造成 2,缓存

  4. yii2顶部导航使用

    yii2中使用顶部导航的具体方法: 1.视图中调用两个类: use yii\bootstrap\Nav;use yii\bootstrap\NavBar; 2. <?php            ...

  5. 七、Java基础---------JDK安装与配置

    配置环境变量名词说明 path:通过path系统去寻找可执行的java文件. JAVA_HOME:JDK的安装目录 classpath:加载目录 为什么需要配置path,什么时候需要classpath ...

  6. expandlistview

    package com.exaple.zhonghe2; import java.sql.SQLData;import java.util.ArrayList;import java.util.Has ...

  7. 【python cookbook】【数据结构与算法】20.将多个映射合并为单个映射

    问题:在逻辑上将多个字典或映射合并为一个单独的映射结构,以此执行某些特定的操作,比如查找值或者检查键是否存在 解决方案:利用collections模块中的ChainMap类 ChainMap可接受多个 ...

  8. Github上PHP资源汇总大全，php学习的好资料

    Github上PHP资源汇总大全,php学习的好资料 国外程序员ziadoz 在Github上收集整理了PHP的各种资源,内容包括模板.框架.数据库.安全等方面的库和工具.汇总了各种PHP资源,供各位 ...

  9. nexus启动不了

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

  10. nohup DEMO

    nohup,顾名思义:挂起免疫. nohup命令可以防止当你退出系统时,在后台运行的进程被终止.它能让你运行的命令或脚本在你退出系统后继续在后台运行. nohup命令不能自动的将任务放在后台运行,所以 ...