获取IE与FF中鼠标坐标

2024-05-13 14:48
文章标签 坐标 获取 鼠标 ie ff

本文主要是介绍获取IE与FF中鼠标坐标,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

据资料显示,IE中获取鼠标坐标的事件属性有以下几个:

clientX设置或获取鼠标指针位置相对于 窗口客户区域的x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX设置或获取鼠标指针位置 相对于触发事件的对象的 x 坐标。
offsetY设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX设置或获取获取鼠标指针位置相对于 用户屏幕的x 坐标。
screenY设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x设置或获取鼠标指针位置相对于 父文档的 x像素坐标。
y 设置或获取鼠标指针位置相对于父文档的y 像素坐标。

( 经过测试,发现x跟clientX, y跟clientY一致 )

据资料显示,FF中获取鼠标坐标的事件属性有以下几个:

clientX设置或获取鼠标指针位置相对于 窗口客户区域的x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
screenX设置或获取获取鼠标指针位置相对于 用户屏幕的x 坐标。
screenY设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
pageX / layerX  
设置或获取鼠标指针位置相对于父 文档的 x像素坐标。
pageY / layerY  设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

(经过测试,发现page跟layer就像相对定位与<body>一样,等于 client+滑动距离

自己写了个小js测试下,点击红色区域的时候,获取对应坐标填写到对应的input中,下面是截图:

https://img-my.csdn.net/uploads/201401/02/1388633399_1520.png

这个是IE8的截图,红色的点数鼠标点击的大概位置,黑色的线条表示client的坐标距离, 绿色的表示offset, 橙色表示screen.

https://img-my.csdn.net/uploads/201401/02/1388633399_8905.png

这个是FF的截图,红色的点数鼠标点击的大概位置,黑色的线条表示client的坐标距离, 粉色的表示page/layer, 橙色表示screen.

这样看感觉page/layer跟client一样,所以我做多一张图:

获取IE与FF中鼠标坐标
当滑动条滑动时,元素上升,点击时候,client会根据窗口来定,但是page/layer却依然相对于<body>就像图里面画的一样, 它的坐标等于client+滑动距离

这篇关于获取IE与FF中鼠标坐标的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/986007

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

Python如何获取域名的SSL证书信息和到期时间

《Python如何获取域名的SSL证书信息和到期时间》在当今互联网时代,SSL证书的重要性不言而喻,它不仅为用户提供了安全的连接,还能提高网站的搜索引擎排名,那我们怎么才能通过Python获取域名的S... 目录了解SSL证书的基本概念使用python库来抓取SSL证书信息安装必要的库编写获取SSL证书信息

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase

Android如何获取当前CPU频率和占用率

《Android如何获取当前CPU频率和占用率》最近在优化App的性能,需要获取当前CPU视频频率和占用率,所以本文小编就来和大家总结一下如何在Android中获取当前CPU频率和占用率吧... 最近在优化 App 的性能,需要获取当前 CPU视频频率和占用率,通过查询资料,大致思路如下:目前没有标准的

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效