mouseover,mouseout和mouseenter,mouseleave的区别及适用情况
在做类似于百度地图右下角,不同地图切换UI时,遇到了问题。
就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave。
来看一看mouseover,mouseout和mouseenter,mouseleave的区别。
A:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
B:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
注意:mouseover ,mouseout当鼠标指针穿过被选元素子元素时,也会触发事件。这在绑定事件时,有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的
html:
对应js:
mouseover,mouseout和mouseenter,mouseleave的区别及适用情况的更多相关文章
- mouseover&mouseout和mouseenter&mouseleave
mouseenter&mouseleave: 进入被选元素触发,进入被选元素的子元素不会重复触发. mouseover&mouseout: 进入被选元素触发,从被选元素进入其子元素会再 ...
- MouseOver/MouseOut vs MouseEnter/MouseLeave
参考 http://www.oschina.net/question/234345_45280 这是jQuery提供的函数 要注意MouseOut 和 MouseLeave的区别 比如对元素A绑定Mo ...
- mouseover,mouseout和mouseenter,mouseleave
mouseover和mouseout 鼠标指针进入或者离开被选元素或其子元素,都会触发相应事件. 非IE浏览器支持该事件. mouseenter和mouseleave 只有在鼠标指针进入或者离开被选元 ...
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- mouseover事件与mouseenter事件的区别
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...
- 一个例子说明mouseover事件与mouseenter事件的区别
<html> <head> <meta charset="UTF-8"> <title>haha</title> < ...
- jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...
随机推荐
- PHP处理上传文件
HTML中使用type = 'file'类型的表单可以向服务器上传文件: 上传文件的表单必须在form中定义enctyp = 'multipart/form-data': HTML代码如下: < ...
- Hey,man,are you ok? -- 关于心跳、故障监测、lease机制
电话之于短信.微信的一个很大的不同点在于,前者更加及时,有更快速直接的反馈:而后面两个虽然称之为instant message,但经常时发出去了就得等对方回复,等多久是不确定的.打电话能明确知道对方在 ...
- 到底什么是 "method group"
class Program { delegate void NoParam(); delegate void WithOneParam(string name); static void Main(s ...
- 多台linux主机之间建立免密通信
多台linux主机之间设置免密通信 例:A 向 B设置免密通信 第一步 A生成密钥对 ssh-keygen -t rsa -t 指定秘钥的类型 rsa 秘钥类型 密钥目录:/root/.ssh/(如果 ...
- Spring知识点回顾(06)Profile 和 条件注解 @Conditional
1.设定环境中的active profiles 如:DispatcherServerlet的init-param spring.profiles.active=production spring.pr ...
- Mac里安装Jmeter
前提是需要安装jdk,参见http://www.cnblogs.com/fun0623/p/4703456.html 1.解压包 (双击apache-jmeter-2.13) 2.进去到解压后的bin ...
- Android TabLayout 在宽屏幕上tab不能平均分配的问题解决
当TabLayout 在宽屏幕的设备上,如平板横屏的时候,tab的宽度超过一定值后,就不在平均分配宽度,而是居中显示.此时设置 app:tabMode="fixed"或者 top_ ...
- HTML中的上下标标签的演示
HTML中的上下标标签的演示 #table_head>td { font-weight: bold } tr { text-align: center } 作用 标签 演示代码 呈现效果 上标 ...
- python3全栈开发-异常处理
一. 什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异常如下 而错误分成两种 ...
- [LeetCode] Image Smoother 图片平滑器
Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother t ...