热门标签 | 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


推荐阅读
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 本文全面解析了JavaScript中的DOM操作,并提供了详细的实践指南。DOM节点(Node)通常代表一个标签、文本或HTML属性,每个节点都具有一个nodeType属性,用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作,结合实际案例,帮助读者更好地理解和掌握DOM编程技术。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
  • HTML 页面中调用 JavaScript 函数生成随机数值并自动展示
    在HTML页面中,通过调用JavaScript函数生成随机数值,并将其自动展示在页面上。具体实现包括构建HTML页面结构,定义JavaScript函数以生成随机数,以及在页面加载时自动调用该函数并将结果呈现给用户。 ... [详细]
  • SQLite数据库CRUD操作实例分析与应用
    本文通过分析和实例演示了SQLite数据库中的CRUD(创建、读取、更新和删除)操作,详细介绍了如何在Java环境中使用Person实体类进行数据库操作。文章首先阐述了SQLite数据库的基本概念及其在移动应用开发中的重要性,然后通过具体的代码示例,逐步展示了如何实现对Person实体类的增删改查功能。此外,还讨论了常见错误及其解决方法,为开发者提供了实用的参考和指导。 ... [详细]
  • 在 Angular Google Maps 中实现图片嵌入信息窗口的功能,可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件,使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件,以实现动态加载和显示图片的功能。此外,还将探讨一些常见的问题和解决方案,帮助开发者更好地集成这一功能。 ... [详细]
  • 在探讨C语言编程文本编辑器的最佳选择与专业推荐时,本文将引导读者构建一个基础的文本编辑器程序。该程序不仅能够打开并显示文本文件的内容及其路径,还集成了菜单和工具栏功能,为用户提供更加便捷的操作体验。通过本案例的学习,读者可以深入了解文本编辑器的核心实现机制。 ... [详细]
  • 本文详细介绍了利用JavaScript实现图片懒加载的有效方法。通过监听窗口的加载和调整事件,可以显著提升网页性能和用户体验。具体实现包括在 `window.onload`、`window.onresize` 和 `window.onscroll` 事件中动态加载图片,确保只有当图片进入可视区域时才进行加载,从而减少初始加载时间并提高页面响应速度。此外,还提供了一些优化技巧,如使用 Intersection Observer API 来进一步简化代码和提升效率。 ... [详细]
  • 探讨 `org.openide.windows.TopComponent.componentOpened()` 方法的应用及其代码实例分析 ... [详细]
  • 整合百度UEditor编辑器于ASP后端的实现步骤与技巧
    随着微软停止对XP系统的支持,公司已全面升级至Windows 7。早期网站创建时使用的编辑器仅兼容IE6浏览器,而如今系统更新后,原有的编辑器已无法满足新环境的需求。本文详细介绍了如何将百度UEditor编辑器整合到ASP后端,包括实现步骤和实用技巧,确保网站在新系统下仍能高效运行并提供良好的用户体验。 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • 在《JavaScript进阶之旅:第三阶段深入探索》中,我们将通过一系列复杂的代码示例,深入探讨JavaScript的高级特性与应用技巧。本阶段将重点讲解如何利用用户输入进行动态交互,例如通过提示框获取1到9之间的正整数,并基于此实现更多功能。此外,还将介绍如何优化代码结构,提升程序的可读性和维护性。 ... [详细]
  • 本文将介绍如何在混合开发(Hybrid)应用中实现Native与HTML5的交互,包括基本概念、学习目标以及具体的实现步骤。 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
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社区 版权所有