Web前端开发笔记45——三大偏移量元素的总结、mouseenter和mouseover和mouseleave

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

#js

本文探讨了页面滚动中使用的pageXOffset和pageYOffset属性，并详细解释了mouseenter和mouseover两个鼠标事件的区别。mouseenter事件在元素上触发时不会冒泡，而mouseover事件则会在元素及其子元素上冒泡，这一特性使得它们在不同场景中有不同的应用。了解这些细节对于优化网页交互体验至关重要。

页面的滚动距离使用的是：

pageXOffset、pageYOffset。

1.mouseenter和mouseover区别。

原因在于mouseover会冒泡，而mouseenter阻止了冒泡。

五、元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，三大系列总结，mouseenter 和mouseover的区别，动画函数封装
快乐de馒头
01-02 348
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 1.1.2 offset 与 style 区别 offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的.
Javascript【元素偏移量 offset 系列、元素滚动 scroll 系列】
m0_52896752的博客
10-28 900
Javascript【元素偏移量 offset 系列、元素滚动 scroll 系列】
webApi05
qq_36343904的博客
05-24 447
**1.1. **元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 1.1.2 offset 与 style 区别 offset offset 可以得到...
Web API（五）元素偏移量和立即函数
qq_43182390的博客
04-29 267
Web API第五天 一、元素偏移量 offset系列 1、概念 offset 翻译过来就是偏移量，可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 2、offset 与 style 区别 offsetWidth 返回元素应用的布局宽度（padding+border+width），style.width 返回元素内联样式的宽度属性值（不包含padding和border 的值） ​ 2. offset
Web前端开发笔记44——元素偏移量offset、偏移量client、立即执行函数、scroll属性、页面滚动
DRLDER的博客
05-06 309
1.offset与style的区别
web前端，标签切换总结1mouseover,mouseout
翟浩浩Android专栏
10-02 719
html> html> head> meta charset="UTF-8"> script type="text/javascript" src="jquery-2.1.4.min.js">script> script type="text/javascript"> $(document).ready(function(){
移动web的mousedown，mouseover，mouseup事件
u014772531的博客
12-12 1939
先贴一段fastclick.js代码：    // Set up event handlers as required console.log('isAndroid: '+deviceIsAndroid); if (deviceIsAndroid) { layer.addEventListener('mouseover', this.onMouse, true); ...
18个前端开发实战案例源码详解
这要求开发者熟练掌握事件委托、mouseenter/mouseleave与mouseover/mouseout的区别，以及preventDefault()和stopPropagation()的合理使用。 “留言发布功能”分别用原生JS和Vue实现，形成鲜明对比。原生版本需手动...
PC端网页特效—元素偏移量 offset 系列（获取鼠标在盒子内部的坐标）、元素可视区 client 系列、元素滚动 scroll 系列（ 页面被卷去的头部、仿淘宝固定右侧侧边栏）
m0_59030524的博客
03-09 385
Tip：在前面学习了JS基础、DOM 和 BOM 的基本操作后，这部分主要学习这些知识的拓展应用。 目标： 能够说出常见offset系列属性的作用 能够说出常见client系列属性的作用 能够说出常见scroll系列属性的作用 能够封装简单动画函数 能够写出网页轮播图案例 1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置.
前端开发的面试经
12-03
- **鼠标事件**：`mouseover`/`mouseout`与`mouseenter`/`mouseleave`在不同浏览器中的行为可能不同。 - **PNG透明**：IE6等旧版IE浏览器在处理PNG图片的透明效果时存在问题。 - **`text-align`属性**：某些属性如`...
mouseover/out/enter/leave
大赚万万亿
09-26 337
mouseover,与之重叠的部分都会触发mouseover,鼠标从子到父和鼠标从父到子都会触发.事件触发顺序是子到父.鼠标默认放在孙级,用键盘快捷键刷新网页,会触发孙到父的所有事件。mouseout离开区域后,与之重叠的部分都会触发mouseout,鼠标从子到父和鼠标从父到子都会触发,事件触发顺序是子到父.鼠标默认放在孙级,用键盘快捷键刷新网页,不会触发事件。mouseenter只会触发自身的进入区域事件,不会冒泡到父级,鼠标是仅父到子,事件触发顺序是仅子元素触发.鼠标在孙级,用键盘快捷键刷新网页,
前端基础知识之CSS（浮动、网页布局、高度塌陷、clear和clearfix、定位）（四）
qq_48617322的博客
07-29 865
文章目录
mouseover和mouseenter两个事件的区别
热门推荐
LPLIFE的博客
05-24 1万+
又来打个酱油. mouseover(鼠标覆盖) mouseenter(鼠标进入) 二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter) 共同点:当二者都没有子元素时,二者的行为是...
JQuery的事件之鼠标事件
AZHELL的博客
05-05 5353
最近在慕课网学习JQuery，然后在W3C参考相关资料（在这里感谢慕课网，感谢W3C）！样式和DOM都学完了，最近在学习事件，但是说实话很多东西真的不是很理解，手里倒是有源码，但是作为菜鸟问题就在这里，不会看啊，/(ㄒoㄒ)/~~。之前的样式和DOM还好，事件学习过程中问题有点多，所以打算记录下来，简单的就提一下略过，不理解的就谈谈自己的感悟，以后成为大牛了回来再改改，各位同志们也多多指导啊！！！...
27.html的定位（position）和偏移量（offset）
越努力越幸运的博客
04-25 6228
文章目录定位偏移量（offset）相对定位绝对定位固定定位粘滞定位 定位 定位（position）是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置 可选值： static：默认值，元素静止，没有开启定位 relative：开启元素的相对定位 absolute：开启元素的绝对定位 fixed：开启元素的固定定位 sticky：开启元素的粘滞定位 偏移量（offset） 元素开启定位后，可以通过偏移量来设置元素的位置，偏移量有四个分别是 top：定位元素和定位位置上边的距离 bottom：定位元素和
offset 与 style 区别
qq_41033308的博客
09-11 689
offset 与 style 区别 一，什么是offset ？ offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 具体如图所示： offset 与 style 区别 offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 ..
解决鼠标mouseenter和mouseleave来回闪烁问题
SHALLNY
04-29 6852
写久了UI组件封装的web项目，再去写常规的无UI组件的后台管理系统，真是添砖加瓦都得自己写。 在实际运用中，鼠标事件会有很多的触发异常效果在里面，比如今天要说的鼠标经过、移开事件，我习惯用mouseenter 和 mouseleave这两个。 2.在下面这段html代码中需求时，当鼠标经过该div service-status后，出现一段消息信息框。 <div class="serv...
Web前端开发笔记11——css字体属性
DRLDER的博客
04-18 2384
1
Web前端开发笔记21——float浮动
DRLDER的博客
04-19 1255
1.传统网页布局的三种方式： 普通流（标准流） 浮动 定位 2.标准流：就是标签按照规定好默认方式排列。 3.多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 4.float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 5.浮动特性： 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标） 浮动的盒子不再保留原先的位置。 浮动具有行内块元素的特点。如果给行内元素或是其他类型元素添加浮动，那么就会让此元素具有行内块元素相似的
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言行物恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值