一、当绑定着两个事件的元素里面没有子元素的时候,这两个事件的触发效果是一致的:

x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter").text(y+=1);
});
});
</script>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
mouseover 事件:
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
mouseenter 事件:
</div>

二、当绑定事件的元素里面有子元素的时候,鼠标经过绑定mouseover的当前元素以及它里面的子元素的时候,都会触发,而经过绑定mouseenter的元素时,只会在鼠标刚进入的时候触发,当进入其子元素的时候,是不会再触发的了

x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2>
</div>

总结两句话

  • 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout

  • 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

【转】mouseover和mouseenter的区别的更多相关文章

  1. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  2. mouseover和mouseenter的区别

    mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...

  3. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  4. jQuery关于mouseover和mouseenter的区别

    原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...

  5. mouseover与mouseenter的区别

    mouseenter事件在鼠标进入某个元素,或第一次进入这个元素的某个子元素时触发.一旦触发后,在mouseleave之前,鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mo ...

  6. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  7. JQuery中的mouseover和mouseenter的区别

    mouseover和mouseout是一对:mouseenter和mouseleave是一对. 相同点:都是鼠标经过就触发事件 不同点: 给外盒子一个经过触发事件,但是mouseover会在鼠标经过外 ...

  8. The different of mouseover and mouseenter

    l论事件onmouseover 和 onmouseenter:同类比较onmouseout 和 onmouseleave; 使用onmouseover时,鼠标除了被设置事件的元素,还会触发其子元素: ...

  9. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

随机推荐

  1. css里面鼠标的形状-----》easyui哪点事

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  2. 生产者消费者模式-Java实现

    感知阶段 随着软件业的发展,互联网用户的日渐增多,并发这门艺术的兴起似乎是那么合情合理.每日PV十多亿的淘宝,处理并发的手段可谓是业界一流.用户访问淘宝首页的平均等待时间只有区区几秒,但是服务器所处理 ...

  3. python 入门级教你如何拿到小姐姐微信

      第一题: 首先错误的思路,首先找出  707829217/2+1 里面的所有奇数,然后再利用两个for,来判断 import math def func_get_prime(n): return ...

  4. JDBC概念和使用

    JDBC学习:    JAVA的数据获取方式:        1 直接声明变量并赋值.                 2 Scanner类控制台输入        3 IO流(将硬盘存储中的数据读取 ...

  5. 论文阅读 | FoveaBox: Beyond Anchor-based Object Detector

    论文阅读——FoveaBox: Beyond Anchor-based Object Detector 概述 这是一篇ArXiv 2019的文章,作者提出了一种新的anchor-free的目标检测框架 ...

  6. Shiro在SpringBoot中的使用

    Demo代码请参考:https://github.com/roostinghawk/ShiroDemo 以下为主要代码(经过验证,测试) 1. pom.xml:引用shiro <dependen ...

  7. Vue-cli3 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

    在vue.config.js里 添加 configureWebpack : { performance: { hints:'warning', //入口起点的最大体积 整数类型(以字节为单位) max ...

  8. Ubuntu no such file or directory

    在运行可执行程序时,报错如上,检查步骤: 1.程序是否和Ubuntu版本位数一致. Linux系统查看:uname -a 程序版本查看:file <filename> 2.查看文件是否有可 ...

  9. fish shell version

    如果你使用 fish shell, 想要自己定义变量,或者函数,或者alias, 不要使用      version     这个名字, 因为,version 这个名字 被 fish 本身占了.... ...

  10. 3dsmax2019卸载/安装失败/如何彻底卸载清除干净3dsmax2019注册表和文件的方法

    3dsmax2019提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2019失败提示3dsmax2019安装未完成,某些产品无法安装,也有时候想重新 ...