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>
时间: 2024-10-25 04:59:14

js获取鼠标位置的相关文章

JS获取鼠标位置的三种方法

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠标位置首先要了解什么是event,event是一个声明了全局变量的一个对象,在chrome和IE下,可以随意访问,对于好奇的朋友console.log一下event.但!!!Firefox下是没有event这个对象的!! 好消息的是:在IE8,chrome下,是有event这个对象的! 鼠标点击位置

js获取鼠标位置的各种方法

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

JS获取鼠标位置,兼容IE FF

原文发布时间为:2009-08-31 -- 来源于本人的百度文章 [由搬家工具导入] 由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取。网上说的一般都是触发mousemove事件才行。我这里有两段代码,思路都一样,就是风格不同。 第一段代码是利用全局变量来获取实时鼠标的位置。 var xPos; var yPos; window.document.onmousemove(function(evt){      evt=e

如何获取鼠标位置

获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div> //进行操作 <script type="text/javascript"> var x,y,T,L; T=$("#m").offset().top;//div离开左端的距离 L=$("#m").offset().left;//

C++获取鼠标位置及全局检测鼠标行为

1.获取鼠标位置(在屏幕的位置)  CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ClientToScreen(this->m_hwnd,m_mouse);  //客户端位置转化为屏幕位置 ScreenToClient(this->m_hwnd,m_mouse) ;  //屏幕转化为客户端 3.获取控件关于在屏幕的位置 CRect  rc GetWindowRect(&

原生js获取鼠标坐标方法全面讲解-zmq

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.screenX/Y 二.分别讲解如下: clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 page

js获取鼠标移动坐标

js获取鼠标移动坐标,很多情况下还需要考虑document.documentElement.scrollLeft . document.documentElement.clientLeft; var _touchstart, _touchend,_touchmove; var isPC=window.ontouchstart===undefined; if(isPC){ _touchstart="mousedown"; _touchmove="mousemove";

js获取鼠标坐标实例

js获取鼠标坐标实例,关键代码如下: 1.js 代码 /*显示坐标*/ function showTip(obj){ //if(!$.trim($(obj).html())) // return false; var event=window.event; var element=event.srcElement; //var X = $(obj).position().top; //var Y = $(obj).position().left; //alert(X+","+Y); v

canvas获取鼠标位置

canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati