热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Javascript事件(0)-元素和鼠标事件的距离属性

js中有很多“距离”,为了不会混淆这里总结一下其中部分距离本文包括元素属性相关的距离和鼠标事件中的距离,废话不多说,进入正文先补充一下,本文的测试环境如下:ChromeDev5

js中有很多“距离”,为了不会混淆这里总结一下其中部分距离

本文包括元素属性相关的距离和鼠标事件中的距离,废话不多说,进入正文

先补充一下,本文的测试环境如下:

Chrome Dev 54.0.2840.71
Firefox 49.0
Opera 41.0
Safari 10.1
IE 11。

前四者运行在macOS Sierra 10.12上,IE11运行在搭载windows10 1607的虚拟机上

元素属性中的各种“距离”

元素属性中的距离有以下6对:

scrollLeft: 设置或获取位于对象左边界和窗口中可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight: 获得对象的可视区域的高度,包括边框
offsetWidth: 获得对象的可视区域的宽度,包括边框

clientHeight: 获得对象边框内部分的高度
clientWidth: 获得对象边框内部分的宽度

offsetLeft: 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置

clientTop: 获取对象顶部边框宽度
clientLeft: 获取对象左侧边框宽度

scrollWidth: 获取对象的滚动宽度
scrollHeight: 获取对象的滚动高度。

上面提到了offsetParent属性,其实当前div相对谁定位,这个属性就是谁。根据position值不同,有以下2种情况

  • 当父辈元素都没有relative属性时,无论当前元素的position是absolute,relative,fixed或fixed,offsetParent都是body元素

  • 父辈元素有relative属性时,无论当前元素的position是absolute,relative,fixed或fixed,offsetParent是具有relative属性的最近父元素

分不清楚? 看下图

这里写图片描述

这个里面可以清晰的看到上方的前4对,和他们之间的关系。

关于jQuery的元素距离属性,文章最后整理了他们和DOM属性之间的关系。

第一个值得强调的是,上面的这个例子中的div的box-sizing属性是默认的content-box, 它的offsetHeight,clientHeight,clientWidth和offsetWidth有如下关系:

clientHeight = height + paddingTopWidth + paddingBottomWidth;
clientWidth = width + paddingLeftWidth + paddingRightWidth;

offsetHeight = clientHeight + borderTopWidth + borderBottomWidth;
offsetWidth = clientWidth + borderLeftWidth + borderRightWidth;

如果box-sizing属性是border-box,那么,它们的关系将如下(ie6 ie7默认是这样的):

offsetHeight = height;
offsetWidth = width;

clientHeight = height - borderTopWidth - borderBottomWidth;
clientWidth = width - borderLeftWidth - borderRightWidth;

第二个值得强调的是,这个例子中,由于它的父元素没有设置position:relative,所以图中这个div利用position:absolute;相对文档定位,如果给他添加一个具有position:relative属性的父div,那么offsetLeft和offsetTop就是下图这样:

<todo>

不过无论它怎么的定位,哪怕是position:relative或fixed,它的计算关系也不会发生变化,依然是:

offsetLeft = left + marginLeft;
offsetTop = top + marginTop;

讲了这么多,那么scrollWidth和scrollHeight呢?scrollWidth和scrollHeight在不同浏览器里面并不一致,如下图(从左到右依次是Chrome, Firefox, Opera, Safari, IE11)

diff

其实仔细研究这个里面的不同,会发现在不同的浏览器div的offsetLeft、offsetTop这两个值的属性并不完全相同。当div里面的内容溢出时,只有IE保留了padding的全部值,chrome、opera和safari会忽略padding-right的值视其为0,firefox会同时忽略padding-right和padding-bottom,如下图

这里写图片描述

在各个浏览器中,对于滚动条本身的渲染也不一样。它们会在计算scrollWidth和scrollHeight时排除各自的滚动条宽度。除了上述的不同,实际发现每个浏览器中scrollLeft和scrollTop的最大值也不一样,甚至差距极大,由于scrollLeft和scrollTop随滚动事件发生而输出,博主就上述例子的最大值记录如下:

maximum value chrome Firefox opera safari IE11
scrollLeft 330 160 827 330 217
scrollTop 230 210 485 230 330

实际上就是由于这些元素属性在不同浏览器中的差异导致scrollWidth和scrollHeight的不同,具体使用应格外注意。不过博主看过一些资料表示这两个属性和offsetParent有关,通过实际编程发现它们和offsetParent无关,这里不展开描述了,因为低版本浏览器,尤其ie7 ie6的实现方式可能会比较奇葩。

鼠标事件中的各种“距离”

鼠标事件很多,不过每个事件中关于距离的属性含义是一样的,这里用mousemove来讲解,具体的内容会在不久之后写到了js事件部分讲解。
鼠标实现对于现在的浏览器来说,实现都是一样的了,下面例子都在Chorme中实现。

鼠标事件有以下6对:

event.clientX:相对浏览器左上角的水平坐标
event.clientY:相对浏览器左上角的垂直坐标

event.offsetX:相对于事件源(event.target||event.srcElement)左上角水平偏移
event.offsetY:相对于事件源(event.target||event.srcElement)左上角垂直偏移

event.pageX:相对于document左上角的水平坐标
event.pageY:相对于document左上角的垂直坐标

event.layerX:相对于offsetParent左上角的水平偏移
event.layerY:相对于offsetParent左上角的水平偏移

event.movementX:相对于前一次事件中screenX的偏移
event.movementY:相对于前一次事件中screenY的偏移

event.screenX:相对于屏幕左上角的水平坐标
event.screenY:相对于屏幕左上角的垂直坐标

x:和pageX一样,用于兼容IE8及以前浏览器
y:和pageY一样,用于兼容IE8及以前浏览器

总之,还是先看图

<todo>
*这个图中,黑色实线边框表示浏览器可视区域部分,外层蓝色虚线框表示整个DOM部分,整个图为电脑屏幕

图里面怎么没有movementX和movementY?因为这个事件的值和上一个事件有关,关系如下:

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY

值得注意的时offsetX和offsetY,他表示鼠标到事件源padding左上角的的偏移,这里mousemove事件注册在window上,所以位置如图所示。

当浏览器的水平滚动条滑动以后,pageX和clientX就不同了。同理,当浏览器的垂直滚动条滑动以后,pageY和clientY就不同了,但它们始终存在以下关系:

event.pageX = event.clientX + body.scrollLeft;
event.pageY = event.clientY + body.scrollTop;

鼠标事件中的距离比元素中的简单一些,具体的使用放在之后写的事件部分。

jQuery中元素距离属性

var $div = $(“#div”);

$div.width(); //元素宽度,不包括padding和border
$div.height(); //元素高度,不包括padding和border

$div.innerWidth(); //元素内宽度,包括padding,不包括border
$div.innerHeight(); //元素内高度,包括padding,不包括border

$div.outterWidth(); //元素可见宽度,包括padding和border
$div.outterHeight(); //元素可见高度,包括padding和border

$div.outterWidth(true); //元素全部宽度,包括padding、border和margin
$div.outterHeight(true); //元素全部高度,包括padding、border和margin


推荐阅读
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • 本文详细介绍了在PHP中如何获取和处理HTTP头部信息,包括通过cURL获取请求头信息、使用header函数发送响应头以及获取客户端HTTP头部的方法。同时,还探讨了PHP中$_SERVER变量的使用,以获取客户端和服务器的相关信息。 ... [详细]
  • 本文详细探讨了select和epoll两种I/O多路复用技术的内部实现原理,分析了它们在处理大量文件描述符时的性能差异,并通过具体示例代码展示了select的工作流程。 ... [详细]
  • selenium通过JS语法操作页面元素
    做过web测试的小伙伴们都知道,web元素现在很多是JS写的,那么既然是JS写的,可以通过JS语言去操作页面,来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 本文介绍了如何使用Python爬取妙笔阁小说网仙侠系列中所有小说的信息,并将其保存为TXT和CSV格式。主要内容包括如何构造请求头以避免被网站封禁,以及如何利用XPath解析HTML并提取所需信息。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 个人博客:打开链接依赖倒置原则定义依赖倒置原则(DependenceInversionPrinciple,DIP)定义如下:Highlevelmo ... [详细]
  • 本文详细探讨了使用Python3编写爬虫时如何应对网站的反爬虫机制,通过实例讲解了如何模拟浏览器访问,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
author-avatar
mobiledu2502873611
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有