JavaScript的mouseover和mouseout事件，在绑定元素内部有子元素的情况下，

经过绑定元素时会多次触发mouseover和mouseout事件。

jQuery解决办法:

jquery的mouseenter和mouseleave方法已经修复了这个问题，可以直接用来替代mouseover和mouseout

不过有个mouseenter和mouseleave有个小问题是，让鼠标从文档外直接进入绑定事件的元素时，mouseenter不生效

暂时解决办法是，别让绑定事件的元素靠浏览器边缘，尽量留出至少1px间距。

另外，jquery的hover()方法,相当于使用了mouseenter和mouseleave。也能解决mouseover和mouseout的问题。

mouseover和mouseout事件在鼠标经过子元素时也会触发的更多相关文章

  1. 【原创】解决鼠标经过子元素触发mouseout，mouseover事件的问题

    关键词:父子元素关系  mouseout  mouseover  事件  事件冒泡 初期代码: <!DOCTYPE html> <html> <head> < ...

  2. mouseover和mouseout事件引发的BUG-解决方法

    mouseover和mouseout引发的BUG原由 当给一个元素添加mouseover或mouseout事件,这个元素还有子元素. 由于子元素的事件冒泡,鼠标移入或移出子元素都会触发事件. 解决的方 ...

  3. 父级元素绑定定mouseout和mouseover，移过子元素是都会触发

    2019独角兽企业重金招聘Python工程师标准>>> mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标 ...

  4. mouseover和mouseout事件的相关元素

    在发生mouseover和mouseout事件时,还会涉及更多的元素,这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内.对mouseover事件而言,事件的主目标获得光标元素 ...

  5. mouseover 和 mouseout 事件是可以冒泡的 取消

    mouseover 和 mouseout 事件是可以冒泡的,子元素上触发的事件会冒泡到父元素上.可以改用 mouseleave 和 mouseenter 事件,这两个事件不冒泡.

  6. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  7. 鼠标 mouseover和mouseout事件

    在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...

  8. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  9. jQuery mouseover,mouseout事件多次执行的问题处理

    控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...

随机推荐

  1. Eclipse SVN插件安装与使用（2014.12.27——by小赞）

    安装参考:http://www.cnblogs.com/xdp-gacl/p/3497016.html 用法参考:http://blog.sina.com.cn/s/blog_8a3d83320100 ...

  2. Hadoop 中 Eclipse 的配置

    先启动Hadoop守护进程,进入hadoop安装目录,执行bin/start-all.sh 主要是为了之后能正确测试 Ubuntu中下载安装Eclipse,执行sudo apt-get install ...

  3. tomcat详细日志配置

    在server.xml里的<host>标签下加上<Valve className="org.apache.catalina.valves.AccessLogValve&qu ...

  4. 【转】shell 教程——07 Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数

    前面已经讲到,变量名只能包含数字.字母和下划线,因为某些包含其他字符的变量有特殊含义,这样的变量被称为特殊变量. 例如,$ 表示当前Shell进程的ID,即pid,看下面的代码: $echo $$ 运 ...

  5. 【iOS-Android开发对照】 之 APP入口

    [iOS-Android开发对照]之 APP入口 [图片 Android vs iOS] 提纲 对照分析iOS,Android的入口, iOS,Android的界面单元 为什么要有那样的生命周期 继承 ...

  6. C# - 类型

    C#是一门使用OOP技术的编程语言(Object Oriented Programming 面向对象编程)面向对象最重要的特性就是接口.继承.多态 C#中所有的事物都可以看做是一个对象 对象由类型来创 ...

  7. IDEA下安装/配置Jrebel

    IDEA下安装/配置Jrebel6.X 1. 为什么要使用Jrebel 在日常开发过程中, 一旦修改配置/在类中增加静态变量/增加方法/修改方法名等情况, tomcat不会自动加载, 需要重启tomc ...

  8. CentOS隐藏nginx版本号

    在/usr/local/nginx/conf/目录中,修改nginx.conf文件 在http {  }段中加入 http { server_tokens off; }

  9. step2 uboot tag存储主要部分代码

      cmd_bootm.c //传递给内核的参数      int do_bootm (cmd_tbl_t *cmdtp, int flag, int argc, char *argv[])     ...

  10. asp.net页面刷新等问题

    windows.open 关闭当前页面刷新父页面实现() { 在子页面中 Page.ClientScript.RegisterStartupScript(this.GetType(), "a ...