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. Stand-up meeting

    A stand-up meeting (or simply "stand-up") is a daily team-meeting held to provide a status ...

  2. 高级IO复用应用:聊天室程序

    简单的聊天室程序:客户端从标准输入输入数据后发送给服务端,服务端将用户发送来的数据转发给其它用户.这里采用IO复用poll技术.客户端采用了splice零拷贝.服务端采用了空间换时间(分配超大的用户数 ...

  3. 解决SDK下载时速度过慢的问题

    1.打开android sdk manager 2.打开tool->options,如图所示 3.将Proxy Settings 里的HTTP Proxy Server和HTTP Proxy P ...

  4. codeigniter nginx rewrite规则配置【转】

    转自:http://www.nginx.cn/1134.html nginx如何配置才能支持codeigniter ? 1. codeigniter的url美化去掉index.php   1 2 3 ...

  5. 设计 REST 风格的 MVC 框架

    http://www.ibm.com/developerworks/cn/java/j-lo-restmvc/ 传统的 JavaEE MVC 框架如 Struts 等都是基于 Action 设计的后缀 ...

  6. C++中this指针的使用方法.

    this指针仅仅能在一个类的成员函数中调用,它表示当前对象的地址.以下是一个样例: void Date::setMonth( int mn ) { month = mn; // 这三句是等价的 thi ...

  7. win10常见问题-任务栏消失

    问题描写叙述: O疼地尝鲜了win10,bug层出不穷,眼下遇到的最大的两个BUG是: 1.启动后高概率出现黑屏,仅仅有鼠标,无桌面,无法拯救 2.正常执行高概率出现任务栏丢失现象.无法拯救 问题一, ...

  8. COCOS2D-X 精灵创建随笔

    CCSprite类中创建Sprite的方法都是静态的: static CCSprite* create ( )  创建一个无图片显示的精灵,可随后用 setTexture 方法设置显示图片 stati ...

  9. 统计中的PV,UV是的意思(转)

    PV(访问量):即Page View, 即页面浏览量或点击量,用户每次刷新即被计算一次. UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客.00:00-24:00 ...

  10. 亲测git与github

    1.安装MyEclipse 8.5,略去不表.2.下载Eclipse的git插件——EGit.下载网址http://download.eclipse.org/egit/updates-1.3/org. ...