zoukankan      html  css  js  c++  java
  • mouseover和mouseenter的区别

    mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程。对应的移除事件是mouseout

    mouseenter:当鼠标移除元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleave

    mouseover和mouseenter的异同体现在两个方面:

    1. 是否支持冒泡

    2.事件的触发时机

    先看一张图,对这两件事有一个简单直观的感受。

     mouseenter事件的情况:

      当鼠标从元素的边界之外移入元素的边界之内时,事件被触发。而鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。

    也就是说:mouseover支持事件冒泡,而mouseenter不支持事件冒泡

    由于mouseenter不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件,但不会触发mouseenter和mouseleave事件。

    如何模拟mouseenter事件

      

    可见mouseover事件因其具有冒泡的性质,在子元素内移动的时候,频繁被触发,如果我们不希望如此,可以使用mouseenter事件代替之,但是早期只有ie浏览器支持该事件,虽然现在大多数高级浏览器都支持了mouseenter事件,但是难免会有些兼容问题,所以如果可以自己手动模拟,那就太好了。


    参考链接:https://juejin.im/post/5935773fa0bb9f0058edbd61

  • 相关阅读:
    tail,more查看日志(定点和翻页)
    Python:浅拷贝和深拷贝
    mybatis sql查子list
    mybatis在insert中获取到id
    mvn安装jar到本地仓库
    微信支付wxpay -- 移动端app第二章节 -- java 后端代码
    微信支付wxpay -- 移动端app第一章节 -- 注意点
    java字符串大小写转化
    Zxing图片右下角生成二维码
    switchTap、navigateTo、switchTap
  • 原文地址:https://www.cnblogs.com/psxiao/p/11543333.html
Copyright © 2011-2022 走看看