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. Python中的引用的使用注意

    关于Python中的引用的一些使用注意 在python中,在创建一个对象并给它赋予一个变量时,这个赋予的变量仅仅是一个引用它所代表的对象.也就是说新创建的对象只是指向计算机中储存那个对象的内存. 比如 ...

  2. javascript函数定义表达式和函数声明的区别

    在javascript中,函数有两种定义写法,函数定义表达式和函数声明,其例子分别如下所示: var test = function(x){ return x; } function test(x){ ...

  3. PTA 07-图4 哈利·波特的考试 (25分)

    哈利·波特要考试了,他需要你的帮助.这门课学的是用魔咒将一种动物变成另一种动物的本事.例如将猫变成老鼠的魔咒是haha,将老鼠变成鱼的魔咒是hehe等等.反方向变化的魔咒就是简单地将原来的魔咒倒过来念 ...

  4. 半斤八两(创业兴家版 打工仔心声'98 Remix)

    创业兴家打工仔 刻苦工作热诚日夜维系天天专心向上依足正轨 结力好比兄弟努力一生打工仔 相亲相爱朋情日夜传递彼此一家那用分高与低 要互相多鼓励 半斤八两 莫记往昔的创伤半斤八两 面对春光应插秧半斤八两 ...

  5. JQuery Kendo UI使用技巧总结

    Kendo UI开发总结 By Gloomyfish on 2013-04-25 在Grid中支持分页刷新:            scrollable: {virtual : true }, 在Gr ...

  6. Zookeeper3.4.6部署伪分布集群(Apache)

    1.下载Zookeeper http://mirrors.cnnic.cn/apache/zookeeper/zookeeper-3.4.6/ 2.创建/usr/app/zookeeper目录,并切换 ...

  7. mysql 插入语句

    mysql 插入语句 什么时候用单引号,什么时候不用? 1.先创建一个表 create table user(username varchar(255),age int,marry boolean,b ...

  8. WSDL阅读方法

    我们以天气预报WebService服务为例,来看看怎么阅读一个wsdl文档. 打开一个wsdl文档后,先看底部. binding在这里: portType在这里: 好了,看了上面的,我们来说说wsdl ...

  9. Java基础知识强化之集合框架笔记52:Map集合之Map集合的遍历 键找值

    1. Map集合的遍历  Map -- 夫妻对 思路:  A:把所有的丈夫给集中起来.  B:遍历丈夫的集合,获取得到每一个丈夫.  C:让丈夫去找自己的妻子.  转换:  A:获取所有的键  B:遍 ...

  10. windows 8 解决端口(COM和LPT)问题:Prolific USB-to-Serial Comm Port(COM4)驱动异常的问题

    本来都正常的,一段时间后就不能用了,网上搜索了一圈,现记录下来,供大家参考 操作系统是win8 64位的 参考网址(http://blog.sina.com.cn/s/blog_92942dba010 ...