e.pageX+document.body.clientWidth与e.clientX + document.documentElement.scrollLeft得区别???

最新推荐文章于 2022-05-15 10:39:14 发布
原创 最新推荐文章于 2022-05-15 10:39:14 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了JavaScript中两种获取鼠标点击位置的方法：e.pageX+document.body.clientWidth 和 e.clientX+document.documentElement.scrollLeft 的区别。前者用于获取相对于整个文档的X坐标，后者则获取相对于视口并考虑滚动偏移后的X坐标。
e.pageX+document.body.clientWidth与e.clientX + document.documentElement.scrollLeft得区别??? 
glumtree
关注
offsetX, pageX, clientX, offsetHeight, offsetParent, 和 offsetLeft
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-06 1221
在Web前端开发中，理解DOM元素的位置和尺寸是非常重要的。特别是当我们需要处理用户的交互行为，如鼠标点击事件时，了解鼠标的坐标以及元素的位置和大小对于构建响应式的UI至关重要。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在处理复杂的用户交互时，这些技巧和技术可以极大地提高用户体验和应用程序的整体性能。例如，当需要实现复杂的拖拽功能时，一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）
【解读 ahooks 源码系列】DOM篇（四）
xxxzzzqqq_的博客
03-16 2386
本文是 ahooks 源码（v3.7.4【解读 ahooks 源码系列】DOM 篇（一）【解读 ahooks 源码系列】DOM 篇（二）【解读 ahooks 源码系列】DOM 篇（三）本文主要解读useMouseuseScrolluseSize的源码实现。
Browser clientX scrollLeft clientLeft
wo240的专栏
08-23 604
1. clientHeight :  都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3. scrollHeight,scrollWidth:不管有多少对象在页
e.pageX;event.clientX,event.clientY,scrollLeft,clientLeft获取鼠标位置
jizhonghua的专栏
11-04 422
function mousePosition(ev){//返回一个类 if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.bod...
document.documentElement & e.srcElement &e.target
　対苩
06-04 249
[code="html"] $(document.documentElement).bind("click",function(e){ var e = e||window.event; var o = e.srcElement?e.srcElement:e.target if(o){ alert(o.tagName); } }); [...
网页各坐标关于clientX、scrollLeft、offsetLeft、clientLeft等
weixin_30691871的博客
12-01 190
这里如果有框架代码的话，可能会更直接一些，里面有些盒子的值都不知道是哪来的，只选自己看得懂的看吧。以下是对部分值的解释。 1. clientHeight : 都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果...
关于弹出层显示出现的定位方法 document.documentElement.scrollLeft document.body.sc
panshunchang
09-09 293
取得鼠标的坐标方法：   /*** 鼠标坐标位置 **/ function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { //使用document.documentElement.scro...
非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]
10-30
在XHTML中，某些属性和方法需要使用`document.documentElement`而不是`document.body`，例如： - **设置样式**: ```javascript document.documentElement.style.overflow = 'hidden'; ``` - **获取窗口区域和...
js实现椭圆轨迹_用js实现一组图片同心椭圆周运动 图片有从小到大渐近效果
weixin_28698129的博客
02-17 997
最近在网站项目中，有要求将一组图片绕同心以椭圆周轨迹循环运动，并且图片有从小到大的渐近效果。经过考虑，决定用js实现这个特效。效果如下： 实现思路：先实现圆周运动，通过设置长边与短边，就能实现椭圆运动了。首先写html代码，设置容器并附id“container”,然后加上若干图片。 加上适当的样式。最为重要的是将#container设置为相对定位，这样才能使图片的...
Ajax (部分二：prototype.js代码)总结页面向后台传Form值、单个值和后台向前台传一个或是一组值
05-30 2158
附录prototype.js的代码： Prototype = { Version: 1.5.1_rc4, Browser: { IE: !!(window.attachEvent && !window.opera), Opera: !!window.opera, WebKit: navigator.userAgent.indexO
offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
09-22
图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性，对于一些页面的控制很有帮助。
document.documentElement.clientHeight 与 document.body.clientHeight
E_li_na的博客
12-18 469
document.documentElement.clientHeight 与 document.body.clientHeight这两个是有区别的， 前一个是html标签，后一个是body标签。这两个是不同的东西，如果这两个的值返回相同的值，应该是设置了 body,html{ height: 100%} ...
js移动端适配封装rem
xzzfxz的博客
12-10 341
小米官网写法：1rem = 100px !function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=f...
移动端rem适配
sxs1995的博客
06-13 455
!function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n...
clientWidth、clientHeight、 clientLeft、clientTop的区别
weixin_45866961的博客
05-15 482
clientWidth element.clientWidth 属性表示元素内部的宽度，以像素计。 element.clientWidth=Width+padding clientWidth的特殊情况 当在根元素上使用clientWidth时(或者在body标签上，如果文档是在quirks(怪异)模式下)，将返回viewport的宽度(不包括任何滚动条). 该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 element.getBoundingClientRect()。 clientHe..
收集关于scrollTop信息
weixin_30678349的博客
04-13 461
要获取当前页面的滚动条纵坐标位置，用： document.documentElement.scrollTop; 而不是： document.body.scrollTop; documentElement 对应的是 html 标签，而 body 对应的是 body 标签。在标准w3c下，document.body.scrollTop恒为0，需要用doc...
JavaScript 获取鼠标点击坐标五种方式及兼容性
司马懿的西山居
01-17 9540
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y:clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变兼容性：所有浏览器均支持pageX/Y:pageX/Y获取到的是触发点相对文档区域左
详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景
yb305
11-23 5080
clientLeft、clientHeight、clientWidth、clientHeight clientWidth、clientHeight元素内部宽度和高度,clientLeft、clientTop获取元素内边距边框到边框的距离. 大概如下图所示: clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。 如上图所示, 计算方式为, 分为如下两种: 存在垂直滚动条 content width + paddin...
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
热门推荐
qq_42089654的博客
05-30 12万+
首先定义一个div。 然后稍微装修一下 下面开始区分 一、clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth =width+左右padding 2，clientHeigh的实际高度 clien...
2.在标准模式下，检测页面垂直滚动距离的正确属性是？ A. window.scrollY B. document.body.scrollTop C. document.documentElement.scrollTop D. document.scrollingElement.scrollLeft
最新发布
05-31
首先，引用[1]中提到，在标准模式下，应该使用document.documentElement.scrollTop，而在混杂模式下则是document.body.scrollTop。同时，如果支持pageYOffset的话，优先使用window.pageYOffset。这是因为pageYOffset...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值