浅谈pageX/Y和clientX/Y. screenY/X以及兼容性写法

最新推荐文章于 2022-04-21 11:42:51 发布
最新推荐文章于 2022-04-21 11:42:51 发布
阅读量487 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yk18773435037/article/details/80469737
版权
  pageY/X:鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
  clientX/Y:鼠标位于屏幕的顶部和左侧部分的距离。（页面）

  screenY/X:鼠标位于屏幕的上方和左侧的距离。（屏幕）

pageY/X并未得到IE浏览器的支持所以就需要写兼容性写法。思路：鼠标在网页中的位置=被卷去的部分scroll().top/left+可视区域的部分clientX/Y。


yk18773435037
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
13-pageX的兼容性处理.html
02-15
13-pageX的兼容性处理.html
12-pageX的兼容性处理.html
02-15
12-pageX的兼容性处理.html
e.clientX,e.clientY,e.pageX,e.pageY,e.offsetX,e.offsetY,e.screenX,e.screenY
王工头的博客
01-29 1771
e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：参考文档你是如何理解var e=e||window.event的 ...
e.pageX、e.clientX、e.screenX、e.offsetX的区别以及元素的一些CSS属性
weixin_59017683的博客
04-21 5297
网页点位获取
e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY
王工头的博客
01-29 1563
e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.offsetX , e.offsetY 欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：参考文档你是如何理解var e=e||window.event的 刚才写博客《javascript实现简单拖...
关于HTML/CSS/JS常见兼容性整理
Sourcemyx的博客
01-31 2688
13  标准网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE 7、IE 6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。 IE浏览器对于标准技术的支持是很不完善的，这些问题可以分为两种：一种是IE支持
JavaScript 兼容性问题处理
qq_43645678的博客
09-04 375
JavaScript 兼容性问题处理
js多浏览器兼容写法
一抹蓝的专栏
03-22 503
序号操作分类IE(6.0)FireFox(2.0)Mozilla(1.5)当前浏览器备注 1“.”访问tag的固有属性OKOKOKOK　 2“.”访问tag的用户定义属性eg: <input type=”checkbox” myattr=”test”>OKNONOOK可以用getAttribute函数 替代 3obj.getAttribute访问tag的固有属性OKOKOKOK　 4obj.getA
JavaScript中的事件对象、事件对象的属性clientX、clientY、pageX、pageY等等
weixin_46449470的博客
04-26 1246
一、什么是事件对象 ​ 1）、 事件对象 就是保存着事件相关信息的对象。当事件发生时，会自动产生事件对象（不需要new），事件对象中包含着：事件源（发生事件的dom元素），点击是鼠标的哪个键，鼠标的当前位置（事件发生的位置）等等信息。 2）、事件源： ​ 发生事件的DOM元素（按钮，文本框，div，下拉框）。在事件处理函数里可以用this表示。 3）、事件对象的获取 ​ ...
兼容性写法获取鼠标坐标
weixin_34050427的博客
01-12 71
首先： 先对比一下pagexX,clientX,screenX,offsetX几个的区别 pageX/pageY:鼠标相对于整个页面的X/Y坐标 整个页面：整个网页的全部，比如当网页很宽很长，宽2000px，高3000px, pageX/pageY的最大值就是他们。 ClientX/clientY :事件发生时鼠标浏览器内容区域的X/Y坐...
浅谈DOM
zhou_yue999的博客
08-26 3214
DOM DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。 day01 1-入门 操作数据 --直接创建数据类型 如果我们要操作界面,就用DOM操作；系统(浏览器团队写的软件),它按照产业联盟的标准，把html文档解析成了一个对象:关键字 document document对象提供了很多属性和方法 供我们来操作界面 document这个单词是window对象的属性,那么window也是一种标准(约定标准,就是没有标准的意思):所有浏览器团
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
Javascript的IE和Firefox兼容性汇编(zz)
10-31
IE支持 `event.x` 和 `event.y` 属性来获取鼠标坐标，但在Firefox中没有这些属性。 **解决方法**: 使用 `event.clientX` 和 `event.clientY` 作为替代。示例代码： ```javascript var mX = event.x ? event.x : ...
笔记222222222222222222222222222222
最新发布
08-04
笔记222222222222222222222222222222
仿拉钩App小程序.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
华云智慧园区.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
新浪读书.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
JavaScript兼容性难题：解决策略与分析
- **特定事件处理**：在处理鼠标坐标或文本内容时，根据浏览器特性调整，比如IE使用`event.pageX` 和 `event.pageY`，而非IE则可能使用`event.x` 和 `event.y`，以及`textContent` 和 `innerText` 的区别。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值