第八周自学前端H5中问题总结，如ClientX/client pageX/pageY screen/screenY的使用和区别

最新推荐文章于 2023-11-17 01:55:00 发布
最新推荐文章于 2023-11-17 01:55:00 发布
阅读量614 收藏 1
点赞数
分类专栏： 移动开发基础 前端HTML5和css基础学习 文章标签： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41550093/article/details/89393458
版权
本文总结了前端自学过程中的重点，包括div、section和article元素的区别，详细阐述了ClientX/client pageX/pageY screen/screenY在不同场景下的应用，并提到在移动端Web App开发中，设置meta标签以实现全屏及增强用户体验的关键作用。
摘要由CSDN通过智能技术生成

1.div/section/article的区别

<div> - 内容组
<section> - 有联系的内容组
<article> - 独立完整的内容

2.ClientX/client pageX/pageY screen/screenY的使用和区别

pageX/pageY：低版本浏览器（IE67）不支持，以当前文档（body）的左上角为基准点。

screenX/screenY：以当前屏幕的左上角为基准点。

clientX/clientY：当前窗口的左上角为基准点，可视区域。

最低0.47元/天 解锁文章
鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解
Janewenhui的博客
12-18 609
文章目录一、鼠标事件1. onclick2. onmousedown3. onmouseup4. onmousemove5. onmouseover6. onmouseout二、坐标1、clientX、clientY2、pageX、pageY3、screenX、screenY4、offsetX、offsetY5、x、y 一、鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmous
获取鼠标点击的各种screen/client/offset位置 和相对的坐标系 图片+讲解
preserveXing的博客
06-09 554
获取鼠标点击的位置1.常见的鼠标位置1.1点击的坐标系 ---------屏幕1.2点击的坐标系 ---------浏览器的内容区 不包括搜索框 标签区域1.3点击的坐标系 ---------网页 包括划过去的距离1.4点击的坐标系 ---------以当前事件的目标对象左上顶角为原点1.5点击的坐标系 ---------最近的绝对定位的父元素2.图片显示 1.常见的鼠标位置 1.1点击的坐标系 ---------屏幕 属性 说明 兼容性 点击的坐标系 ---------屏幕 scr
关于PageX,client
DamonT的博客
03-19 282
在懒加载中 document.documentElement 是获取html ，document.body是获取body,此项为0。 document.documentElement.clientHeight 为当前窗口的高度。 所以 只需要判断 当前 元素离顶部的距离 < 滚动的距离 + 窗口的高度 即： element.offsetTop < document.documen...
移动端client，page，screen之间的区别
Tea_jacket的博客
07-06 1804
client是相对当时屏幕的距离屏幕顶部的距离 page是相对当时页面的内容原点，包含滚动的 screen是相对于屏幕原点的距离移动端很少用 当页面的宽度和屏幕一样宽高时候client和page一样
原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分
chongfeng2994的博客
11-28 652
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/72627855 本篇主要介绍clientLeft、offsetLeft、clientX、offsetX这四种元素属性的...
【前端】screenX/Y, clientX/Y, pageX/Y 的区别
weixin_34197488的博客
05-05 224
一图胜千言。 做了一个图： 转载于:https://www.cnblogs.com/forzhaokang/p/5463384.html
区分clientX、offsetX、pageX、screenX
Daisy花园
02-22 990
以前一直以为写了这几个属性的区分的，今天再来看居然没有写。 不过这个还是很有用的。这里再来总结一下。所有解释都在图里面。这里再来文字解释一下，图中至标注了Y的值，X同理。clientX clientYevent.clientX event.clientYclient直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。event.clientX、event
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
11-26
screenY  鼠标相对于显示器屏幕左上角的偏移 pageY  鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响)  IE9之下并不支持这个属性  但是可以写点代码计算出来。 jQuery中的实现： 复制代码 代码如下:  // ...
h5移动端新增事件
song854601134的博客
03-31 1977
为什么touch事件中要阻止浏览器的默认行为 那肯定是在能支持触屏的设备上运行，比如手机，手机上你滑动的时候他本身就有个默认的滚屏，因此如果你要操作操作你个dom元素，用touchmove事件，这其实也是滑动。原本你的效果是要在dom上滑动然后产生相应的效果，这个时候你肯定不希望手机上的浏览器屏幕滚动，所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验。 touchmove 默认会有滚动效果吗！？？ 移动端,同一页面不同层的划动操作会造成相互影响,需要额外处理 如:页面层和弹出层(如picke
Javascript移动端触屏滑动事件详解
tianxianghuiwei的博客
11-11 2454
同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches。
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
weixin_42357837的博客
06-25 1039
1、offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。2、clientX事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条3、pageX事件对象相对于整个文档的坐标以像素为单位.4、screenX事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.以...
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
热门推荐
梦龙小站
02-07 6万+
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
js坐标和H5新增事件
jiandancubao的博客
09-18 907
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些
JS clientX、offsetX、pageX、screenX
zhumizhumi的博客
07-04 2353
因为要写拖拽、拉伸，所以去查了有关这方面的博客，然后发现每一篇博客说的都不一样。。。，我的这篇博客是按照我自己的理解来解释的，有错误的话，欢迎指正【我也不能肯定100%正确】 一：图形解释 二：书面解释【根据英文单词意思，也可以猜个八九不离十】 screen：屏幕 1.作用对象：鼠标点 2.坐标中心点：电脑屏幕左上角 3.screenX：鼠标点距离电脑屏幕左边的距离；screen...
彻底搞懂 offsetX、scrollX、clientX 的区别
lefex的博客
03-05 1万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 2856
offsetX
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 384
页面： 吸顶方法：
前端$event参数关于位置信息和鼠标信息的所有参数
06-06
在前端开发中，$event参数通常用于事件处理函数中，包含了触发事件的相关信息，其中位置信息和鼠标信息的相关参数如下： 位置信息： 1. clientX：鼠标点击位置相对于浏览器窗口左上角的横坐标 2. clientY：鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值