最终解决 mouseenter, mouseleave , mouseout mousehover mousemove等事件的区别?

news/2024/5/9 19:20:30/文章来源:https://blog.csdn.net/weixin_33766168/article/details/94006621
  1. 在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件...

  2. mouseenter和mouseleave是成对对应的, mouseover & mouseout是对应的, mousedown和mouseup是对应的

  3. 没有mousehover, 只有hover 事件函数, hover是模拟"悬停"的, 就是检查是否在 "mouseenter 和 mouseleave " 之间切换的.., ** 可以认为 hover 等于 mouseenter + mouseleave.(会检查 鼠标 是否 移出 对象..., 如果没有移出对象, 就不触发 fnOut.)

  4. mousemove 要小心使用, 一般 不会使用...

下面是摘录自己的 实验结果记录:


mousemove事件 是针对匹配元素的,也就说 只有在 匹配的元素这, 才会触发mousemove事件。 因此,如果你要活得在页面内(视窗内) 任意地方的 鼠标坐标, 就要选择 $(document).mouseover(...). 而不是只在 某一个 div这绑定 mouseover..

用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。 一般还是不要使用这个事件

鼠标偏移量, 基本上可以认为是 鼠标的坐标...(默认原点)

鼠标位置 表示方法, 通用的就是: ordinateX, ordinateY:

screenX, screenY, clientX, clientY, pageX, pageY.
(后面4种, 参照 浏览器 内容区域 的左上角, client会随着滚动条而改变 总是相对于 “可见区域”, page总是相对于 文档最开头的位置, 不随滚动条的改变而改变。“窗口坐标”和 “文档坐标" 的区别!)

offsetX offsetY, 只是微软的ie定义 的, 不是event的标准属性, 也没有广泛支持?
821299-20161017213149560-453148017.png

event的clientX,pageX等属性, 是针对所有的鼠标事件的 event都有的属性, 所有的event 都有这样的属性, 不只是 mousemove。

over和out相对应, enter和leave相对应。。。

hover函数方法: hover是jquery事件 分类中的 "切换"小类中的函数, 另一个切换的方法是 toggle(), 跟效果中的toggle方法是一样的...

在wrapper上加事件,当鼠标移动到wrapper上的时候让class="point"的层放大。但如果用mouseover和mouseout事件的话,当鼠标移动到wrapper层后,point层会变大,但当鼠标在img和text层之间进行移动的时候,point层会变大变小,不停的变化。这并不是我们想要的结果,我们想要的是只要鼠标在wrapper层上,无论是img还是text上,point就变大,但在鼠标未移出wrapper层的情况下,point层不变小。

慢慢思路也清晰了,我们不用mouseover和mouseout而用hover问题就解决了。

hover: function( fnOver, fnOut ) { return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );}

也就是说hover!=mouseover+mouseout。但hover=mouseenter+mouseleave。
821299-20161017213110982-1874443806.png


链式调用 和 分开调用的区别?

链式调用, 是在 对象的 一个方法 调用后 , 才开始 调用 后一个 方法, 两个方法之间 是有先后 顺序的, 而且, 后一个方法的调用 是在 前一个方法的基础上, 进行的 , 所以 对于 "mouseenter, mouseleave" 事件的末尾一个 事件, 必定是 前面的那个 div 已经 显示了 出来 的 基础上的...

如果分开 调用, 就不能保证 mouseleave事件 执行时, div已经被 显示 出来了. 就不能保证 div 已经可见, 从而去 获取div的尺寸...

在 菜单类似 于下拉的 div的 情况下, 不能简单 的 认为 触发 div显示的 span/li, 一旦 mouseleave后, div就 隐藏,因为这样处理 , 会产生div的闪烁. (因为你如果设置成, 一旦从div中移出就隐藏,但是当你移出到 触发元素中,div又要马上 显示, 这样在快速的隐藏/显示过程中, 就产生了闪烁.. .. 为了 解决 触发元素 mouseleave后, 而鼠标 移到 div内部的情况, 这个时候, div还不能 马上就 隐藏... 而且要 考虑: 从触发元素移出 -> 到div中, 和 从 div中移出->但是进入到 触发元素中, 为了避免闪烁, 这两种情形, 都要判断 鼠标的纵坐标位置 (因为横坐标的位置, 不会产生 重叠 , 相互进入), 因此, 要判断 鼠标的纵坐标位置 是在 两者组合对象: (触发元素+ div)的纵坐标组合 之外...时, 才能 隐藏 div.

**触发元素的mouseleave要判断纵坐标, div的mouseleave 也要判断 纵坐标...

[[
关于hover函数的处理
匹配元素, 绑定hover事件, 有多种方法:

  • 直接在hover的参数 函数function中 书写事件处理代码.

  • 使用bind方法, 绑定 "mouseenter, mouseleave" 事件, 到指定到函数 处理 “名字”上

  • 还是使用hover,只是后面的参数 是 一个 指定的 函数名字

这个函数名字, 通常使用 handlerInOut.

为什么要用这个 函数名? 因为 同样的代码 要在多个地方, 多次用到, 所以“遵循: 重复代码 必然可以 重构 必然可以提取”的原则, 把这些同样的, 重复的代码, 提取到一个 函数中, 然后, 在事件处理中使用 这个公用的 提取的函数名。

]] 其实, 这个也是套路吧: 先在要显示 "提示信息/ 操作结果信息提示" 的地方, 创建一个空的 div, 然后 在 js中 向这个div中追加提示信息: $("div-info").append("..." + msg + "...");
如下所示:

821299-20161018111810998-1147544488.png

821299-20161018102027935-1865438756.png


  1. 所有的事件,包括 鼠标事件, 键盘事件, 单击事件, 都不用在前面加on, 这个是jquery..(在html中, 是onclick, onmouseenter, 而在 jquery中, 就是 click, mouseenter...)

  2. 几乎所有的事件方法的参数, 都是 mouseX( [[data], fn] ), 即, 你可以使用一个空的 事件函数, 也可以带 处理函数, 也可以向fn传送处理数据的 事件 event.data的参数

  3. 用什么事件来触发动作, 需要考量: 凡是显示/隐藏的效果, 要用 其他元素来触发,... , (因为当目标对象隐藏后, 对象可能 ? 就 无法选中了...) 凡是只是改变 元素的外观, 如颜色, 背景, 边框等, 不牵涉到元素的隐藏的, 可以由对象本身的 事件来触发...

mouseenter事件和 mouseover事件, 从名字上都能 区分 他们的不同(可以用房间 来比喻: mouseenter, 相当于 进入房间, 那你只能在进入时, 触发一次; 而mouseover, 在...之上, 就相当于, 你 坐在房间中的沙发上, 这时 你会触发 沙发 的 mouseover 事件; 但同时, 这个沙发的 over事件 会冒泡, 你坐在沙发上, 那 你肯定也 算是 是在 房间的 over上面, 所以 也会触发 父元素 "房间的" mouseover事件)::

对于包含子元素的 父元素, 如div>p>span来说, 对于 div来说, mouseenter事件只有一次, 即只有当鼠标 "从div 元素的边界 边线 外 第一次 进入元素 内部时, 才会触发mouseenter 事件.       而对于 mouseover 事件, 当鼠标从 父元素进入子元素 / 从子元素移出到父元素, 这两种情况 都会触发 mouseover事件, 前者是由 子元素的over事件 冒泡产生的, 后者是父元素本身的 over事件...

你就想象 是 "房间" 和 "沙发"的 关系...

与之对应的一组事件是: mouseleave 和 mouseout: enter和leave相对应, over和 out相对应.

注意的是, mouseout 事件同样会产生冒泡, 由div下的p, span等冒泡产生的out事件 也会触发 div的 mouseout事件. 在 最后一次 鼠标离开 div的时候, 会同时产生 两个事件: leave和out事件! (而且是div本身产生的)...


upan下的.Trash-0是什么?

  1. 是linux下的u盘 的回收站.
  2. linux下的回收站, 是分布在 $HOME/.local/share/Trash下的, 里面有两个文件夹, Files是存放被删除文件的, Info是存放被删除文件的信息的: *.trashinfo...
    821299-20161018104015232-1252692455.png

  3. windows 的回收站是 分布在 每个分区下的 Recycle目录下的...

  4. 而windows 的U盘是没有回收站的, 所以删除后, 就真的没有了. 在windows中, 以点号开头的文件, 不认为是 隐藏文件, 所以 linux下的U盘删除文件信息.Trash-0 在 windows中 就被显示出来了.

  5. 由于windows和linux处理文件 的方式 不同, 所以, 最好是规范 操作 upan中的文件, 否则, 在切换系统时, 会引起 文件的损坏, 甚至造成系统的蓝屏...


821299-20161018114200498-46844958.png

转载于:https://www.cnblogs.com/bkylee/p/5970236.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_789007.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dedecms php 文件修改,织梦DEDECMS网站怎么修改data目录名称

织梦DEDECMS网站怎么修改data目录名称?最近dedecms漏洞频繁出现,织梦官方也给出了很多相应的措施。今天给大家讲的就是dedecms官方建议用户修改data文件名称。 对于虚拟主机来说,有些虚拟主机限制,不给移动到web目录以外&#xff…

怎么让你的网站快速飞

2019独角兽企业重金招聘Python工程师标准>>> 第一章 怎么让你的网站快速飞 1.1 服务器、VPS、空间的介绍 服务器 服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器…

地址栏加不加www都可以访问网站 -- -- -- -- 配置

需求:加不加www都可以访问网站 www.abc.comabc.com 需要配置几个地方: 一、 服务器(以阿里云服务器为例) 需要插入两条记录,可从新手指导中配置,生效时间为TTL中配置的时间内 二、 服务器电脑中&#xf…

大型网站架构系列:消息队列(二)

本文是大型网站架构系列:消息队列(二),主要分享JMS消息服务,常用消息中间件(Active MQ,Rabbit MQ,Zero MQ,Kafka)。【第二篇的内容大部分为网络资源的整理和汇…

web网站开发培训,JavaScript的if关键字

01 哪些专业转CS成功率高? 根据数据统计,在培养的前端开发工程师人才中,成功拿到offer,约38%是计算机专业毕业,62%都是非计算机专业转行的学员! 在成功拿到大公司前端开发工程师offer的非计算机专业同学中…

Springboot+JPA+Thymeleaf 校园博客完整小网站

本文所属【知识林】:http://www.zslin.com/web/article/detail/35此项目是一个比较简易的校园博客。麻雀虽小五脏俱全,虽然是比较简易的但是涉及的知识点还是比较全面的。 此项目涵盖了【知识林】中Springboot和Thymeleaf中所有知识点的内容。 主要功能有…

Nginx网站根目录更改及导致403 forbidden的问题解决

最近因为工作需要,要将Nginx网站根目录更改下,通过网上的一些教程更改后,但发现测试的时候一直提示403 forbidden错误,后台通过一个朋友的提示也解决了,所以现在将详细的步骤分享给大家,有需要的朋友们可以…

【必看】分析各大招聘网站

目前市场上的招聘网站鱼龙混杂,人力资源市场这块大蛋糕谁都想分一块。工作对于每个人来说都是人生中的一件大事,所以如何选择一个适合自己的经验水平等各方面的正规招聘网站就显得尤为重要,那么今天小编就从客观角度,为大家分析市…

二线视频网站突围战

在并购、自制剧、社交视频等各种概念的炒作之下,2013年毫无悬念地成为国内视频网站最热闹的年份。然而这些大戏并不仅仅是一线大佬们的狂欢宴,二线视频企业也不甘落寞,纷纷出击。在这场异常残酷的竞争中,大家都在用生命刷着存在感…

一个做得很好的电子产品测评类网站:Zealer

无意中发现了一个做得很好的电子产品测评类网站——Zealer。http://www.zealer.com/ 站长王自如很有个人魅力。尤其他在老罗发布会点评的那期节目里。 与他类似,我也是做质量评测的,不过是视频的质量评测。我明白做这种第三方评测是很难盈利的。因为一旦…

最简单的视频网站(JavaEE+FFmpeg)

本文记录一个最简单的视频网站系统。此前做过一些基于JavaEE中的SSH (Strut2 Spring Hibernate)的网站系统,但是一直没有做过一个视频网站系统,所以就打算做一个“精简”的视频网站系统,以方便以后测试以及学习使用。本视频网站支持直播&am…

8x8点阵字体在线生成器_超好玩的生成器工具网站,沙雕又有趣!打开新世界

1. 在线抠图、证件照生成器 :http://t.cn/A67EE9UQ2.爱情小说生成器 :同人小说生成器3.Cp短打生成器 :http://t.cn/Aid6pD1l4.爱豆翻牌体验器:爱豆翻牌体验器5.口罩头像生成器:口罩护目镜头像生成器6.今日吃什么:今天晚饭吃神马?7.记仇表情生成器:bangbang93.lab()8…

王道操作系统ppt课件_推荐5个做PPT课件的免费模板网站

老师做课件找模板网站在于精不在多,以下我就精心整理出来5个免费模板网站,推荐给大家。最主要是免费!免费!免费!1、Office Plus(http://www.officeplus.cn/)官方出品,必属精品&#…

python搭建小程序后端_Python开源Web, CMF,可做微信小程序后端, 网站后端等.Restful Api...

dev(开放更新中,可在Tag中可以选择以往的其他版本) 当前更新比较多,请及时更新新版本 低版本更新到v2.2后,如果出现ROOT用户权限问题,[注销登录]后再次登录 ** 注意:更新到v2.2的童鞋请先看这篇文章 ** Version Status Other 开发…

Forefront TMG 2010 篇(七)--本地网站不需要使用代理

上文记录到使用WEB代理上网,而且添加到允许组才可以正常的浏览网页,但是不知大家有没有发觉我没有添加例外,如果没有添加的话,本地的网站时会提示不能正常的浏览,所以我们需要添加进去。 直接把完整的贴出来吧&#xf…

新代系统cnc怎样连接电脑_电脑故障网络修复不能上网站打不开网络连接维修异常系统问题苹果...

拍前必读更多的电脑问题有我们就够了1.在维修过程中会导致C盘或其它盘数据覆盖,无法恢复,买家务必在维修之前做好数据备份,如不备份导致数据丟失,责任全由买家负责。2.在维修之前,本店维修师并不确定您的电脑是否有隐形硬件问题,如在维修过程中发现硬件问题,会建议您使用其它方…

Mac/Linux Curl代理访问测试网站方法

HTTP协议测试访问 curl -I -x 140.205.32.8:80 "http://www.aliyun.com" HTTPS协议测试访问 curl -I -s -k https://140.205.32.8/ -H Host:www.aliyun.com 解释说明 使用过程中,调整期望的IP以及域名。比如:其他测试通过代理访问http://blog.csdn.ne…

PHP搜索优化插件,8个出色的WordPress SEO插件收集

wordpress是当前网终上最的行的内容发布工具之一。它拥有成千上万的免费主题和插件,帮助新手方便快捷地将内容发布到网络上。但是很多时候仅仅将内容发存到网终上是不够的,吸引用户来你的网站是一门科学也是一门艺术,当然wordpress也有许多插…

第一阶段:前端开发_HTML——网站后台显示页面

2018-03-30 HTML 一、HTML介绍 1)超文本标记语言: 超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素,比普通文本更强大。 标记语言:使用一组标签对内容进行描述的一门语言,它不是编…

利用ASP.NET里自带的站点地图工具制作网站站点地图

站点地图很方便能快速给我们导航我们要去访问的地址,能按层级关系分门别类,给用户一个很好的用户体验,很好的看到自己当前所在的网站位置 站点地图,又称网站地图,它就是一个页面,上面放置了网站上所有页面的…