js获取鼠标位置
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获取鼠标位置的更多相关文章
- JS获取鼠标位置，兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- js 获取 鼠标位置 和获取元素位置
]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...
- js如何获取鼠标位置
获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...
- jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 兼容IE FF 获取鼠标位置
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- C++获取鼠标位置及全局检测鼠标行为
1.获取鼠标位置(在屏幕的位置) CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...
- jquery 获取鼠标位置
//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...
随机推荐
- JSP-04- 实现数据的保存
.1 Session 一段时间内,单个客户与Web服务器的一连串相关的交换过程. Ø 4.1.1 应用的场景: 用户登录后保存用户状态 确定用户的唯一 Sessin.getId(); Ø ...
- java的servlet初步学习
目录 1.servelet概念作用理解 ====来源于孤傲苍狼 http://www.cnblogs.com/xdp-gacl/p/3760336.html======= 2.servlet的运行过 ...
- React笔记_(4)_react语法3
生命周期 很多语言中都讲了关于生命周期.这可是决定生命的周始,有没有存在感的关键啊. 生命周期,有生有死,有始有终,因果轮回,循环往复.(说多了) react中,主要说明的是 一个组件的生命周期.简单 ...
- Android 常用工具类之RuntimeUtil
public class RuntimeUtil { /** 通过查询su文件的方式判断手机是否root */ public static boolean hasRootedSilent() { re ...
- PHP中header函数的用法及其注意重点是什么呢
1.使用header函数进行跳转页面: header('Location:'.$url); 其中$url就是将要跳转的url了. 这种用法的注意事项有以下几点: •Location和":&q ...
- [HTML]HTML5实现可编辑表格
HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...
- 每日一九度之 题目1031：xxx定律
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6870 解决:4302 题目描述: 对于一个数n,如果是偶数,就把n砍掉一半:如果是奇数,把n变成 3*n+ 1后砍掉一半,直到该数 ...
- ASp.net 注册
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- c#之财务系统数据库
财务收费系统补充数据库表 1. 学生表(F_Student) 名称 代码 数据类型 强制性的 ID s_ID int TRUE 学生姓名 Stu_name varchar (50) TRUE 身份证 ...
- PHP json_encode() 函数介绍
在 php 中使用 json_encode() 内置函数(php > 5.2)可以使用得 php 中数据可以与其它语言很好的传递并且使用它. 这个函数的功能是将数值转换成json数据存储格式. ...