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. php连接mysql数据库练手

    <?php $servername = "localhost"; $username = "yosha"; $password = "leon0 ...

  2. Ajax 整理总结（入门）

    Ajax 学习要点: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 ...

  3. VS扩展CodeMaid代码整理插件

    本文章转载:http://www.cnblogs.com/wintersun/p/3577039.html 官方地址:http://www.codemaid.net/ 开源VS扩展CodeMaid介绍 ...

  4. hadoop错误Ignoring exception during close for org.apache.hadoop.mapred.MapTask$NewOutputCollector@17bda0f2 java.io.IOException Spill failed

    1.错误    Ignoring exception during close for org.apache.hadoop.mapred.MapTask$NewOutputCollector@17bd ...

  5. Apache Kafka: Next Generation Distributed Messaging System---reference

    Introduction Apache Kafka is a distributed publish-subscribe messaging system. It was originally dev ...

  6. 安装Oracle数据库和PLSQL连接数据库

    首先在Oracle官网上下载: 安装前要注意:将win64_11gR2_database_2of2中的\win64_11gR2_database_2of2\database\stage\Compone ...

  7. [转] Tomcat 配置 SSL

    PS: keystore有自己的访问密码,这个保护层次要低一些,然后keystore里面存有自己的私钥,所以用户要破解的话,既要有keystore,又要有keystore的密码,p12是客户端keys ...

  8. 2016 11 9遇到问题 http请求的各种方式

    遇到问题:对接网易七鱼 调用他们接口是出现问题 1.对方要求  除上传文件外,其他所有接口请求Content-Type类型为:application/json;charset=utf-8:请求内容需要 ...

  9. CentOS7上Nginx的使用

    Nginx 的启动 指定配置文件的方式启动nginx # nginx -c /etc/nginx/nginx.conf 对于yum安装的nginx,使用systemctl命令启动 # systemct ...

  10. Tomcat 的 SSL 配置

    本教程使用 JDK 6 和 Tomcat 7,其他版本类似. 基本步骤: 使用 java 创建一个 keystore 文件 配置 Tomcat 以使用该 keystore 文件 测试 配置应用以便使用 ...