• mouseover、mouseout和mouseenter、mouseleave的应用对比


    在使用jQuery实现京东商城网站时,在实现其左侧菜单栏显示、隐藏切换时,出现如下问题:

    1. 使用mouseover和mouseout实现显示、隐藏的效果完全没有问题,但是打开控制台,使用console.log('aaa')调试时,发现在鼠标移入li时触发移入效果,当输入继续向li中的子元素移入时,再次触发移入效果,只要在li内,没移入一次其子元素,都会触发一次移入效果;

    2. 经过查阅资料,使用mouseenter可以解决子元素触发mouseover的问题,但是当鼠标移入其子元素时移入效果消失;

    3. 经过查阅资料及自己分析,得出结论:

      ① 使用mouseover时,在移入其子元素时会触发一次mouseout,再触发一次mouseover,两次几乎是同时的,所以效果实现上没有太明显的不同,但是实际代码执行时是存在代码重复调用的情况;

      ② 使用mouseenter配合mouseout使用时,使鼠标移入子元素时不再多次触发移入效果,但是每次都会触发一次移出效果,这是mouseout的原因;

      ③ 最终确定,mouseover和mouseout都会产生移入子元素时重复触发,而mouseenter和mouseleave都只会触发一次移入、移出效果

  • 相关阅读:
    【SR】MAP
    【SR】Example-based
    【SR】论文资源相关
    【SR】正则化超分辨率复原
    词汇累记
    单模光纤与多模光纤的实际使用
    光纤中的光波长
    数码相机常用CCD/CMOS尺寸对比
    尼康D90多点对焦
    Python3.x:日期库dateutil简介
  • 原文地址:https://www.cnblogs.com/daleizi147/p/8571221.html
Copyright © 2020-2023  润新知