zoukankan      html  css  js  c++  java
  • mouseover和mouseenter两个事件有什么区别?

    首先回忆下鼠标事件有哪些:

    • mouseup:鼠标按下
    • mousedown:鼠标放开
    • mouseover:鼠标进入
    • mouseout:鼠标离开
    • mouseenter:鼠标进入
    • mouseleave:鼠标离开
    • mousemove:鼠标移动

    那么mouseenter和mouseover的区别呢??

    demo1:

    html部分:

    <button onmouseover=‘myMouseOver’  onmouseout='myMouseOut'>click Me one</button>
    
    <button onmouseenter=‘myMouseEnter’  onmouseleave='myMouseLeave'>click Me two</button>

    js部分:

    function myMouseOver(){
      console.log('--------over')  
    }
    
    function myMouseOut(){
      console.log('--------out')  
    }
    
    function myMouseEnter(){
      console.log('--------enter')  
    }
    
    function myMouseLeave(){
      console.log('--------leave')  
    }

    上面例子可以看出:mouseover和mouseenter没有区别。下面再看

    demo2:

    html部门分:

    <div style='200px;height:50px;background:red;' onmouseover=‘myMouseOver’  onmouseout='myMouseOut'>
      <button>click Me one</button>
    </div>
    
    <div style='200px;height:50px;background:blue;' onmouseenter=‘myMouseEnter’  onmouseleave='myMouseLeave'>
      <button>click Me two</button>
    </div>

    js部分不变,同demo1

    结果:

    绿色进入红色:--------over

    红色进入按钮one:--------out  --------over

    按钮one进入红色:--------out  --------over

    红色进入绿色:--------out

    绿色进入蓝色:--------enter

    红色进入按钮two:

    按钮one进入红色:

    红色进入绿色:--------leave

  • 相关阅读:
    Java-使用IO流对大文件进行分割和分割后的合并
    Java-单向链表算法
    Java-二分查找算法
    Java-二叉树算法
    Java-对象比较器
    Android中Activity的四种开发模式
    Struts2工作原理
    C++实现单例模式
    数组中有一个数字出现的次数超过数组的一半,请找出这个数字
    c++ enum用法【转】
  • 原文地址:https://www.cnblogs.com/yddlvo/p/9036386.html
Copyright © 2011-2022 走看看