mouseover和mouseout事件在鼠标经过子元素时也会触发

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

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

jQuery解决办法:

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

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

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

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

时间: 2024-08-25 14:40:50

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

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

关键词:父子元素关系  mouseout  mouseover  事件  事件冒泡 初期代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="jquery.js"></script> 5 <meta charset="utf-8"> 6 <title>mouseover mouseout</title> 7 <

鼠标 mouseover和mouseout事件

在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }).mouseout(function(){ …… }); 但是当鼠标在div内的元素移动时也触发了mouseout事件,第一时间想到的是自己代码是不是写错了,但是检查了很多遍,发现没有问题的, 既然代码没有问题,那为什么会出现这种情况?后面想不到原因就上网搜索下,结果发现确实是存在这种情况,解决方法是

js在父元素上添加点击事件,怎么阻止子元素继承父元素的点击事件?

div.onclick = function(ev){ if(ev.target!=this) return; else { ... } }

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

hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件,即使添加了event.stopPropagation();return false; mouseout: 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件,即使添加了event.stopPropagation();return false;

如何解决鼠标移动到子元素 会触发父元素的mouseout事件

方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover与mouseenter mouseover  => 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.mouseenter => 只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件. mouseout与mouseleave mouseout => 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouse

jquery如何阻止子元素相应mouseout事件

jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

mouseover、mouseout和mouseenter、mouseleave

这里直接把<Javascript 高级程序设计(第三版)>中的解释贴出来: mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发.不能通过键盘触发这个事件. mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发.又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素.不能通过键盘触发这个事件. mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发.这个事件不冒泡,而且在光标移动到后代元素上时不会触

jQuery中 mouseover、mouseout、mouseenter、mouseleave的区别

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件,与其相对应的是mouseout只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件,与其相对应的是mouseleave 一.以下这个例子能很好的帮助我们理解mouseover和mouseenter的区别: 1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"

JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别

今天总结下mouseenter.mouseleave.mouseover.mouseout的区别,之前一直懵着用没仔细研究他们的区别,结果终于踢到铁板了. 上代码: <style> div { margin: 0 auto; } .box { box-sizing: border-box; padding: 30px 0; width: 300px; border: 1px solid #005AA0; } .sonBox { width: 150px; height: 150px; back