jQuery关于mouseover和mouseenter的区别

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

jQuery在实现这两个事件的时候,mouseover支持事件冒泡,在父级注册事件,子元素也会触发此事件。而mouseenter只有鼠标划到注册事件的元素才会触发。

看个例子:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
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>

  

时间: 2024-11-07 23:04:08

jQuery关于mouseover和mouseenter的区别的相关文章

offset client scroll pageXOffset属性,mouseover与mouseenter事件区别

offset 概述 使用 offset 系列属性可以动态得到该元素的位置(偏移),大小等 offset系列属性 说明(只读属性) ele.offsetTop 返回元素带有定位的父元素上方的偏移,父元素没有定位以body为准 ele.offsetLeft 返回元素带有定位的父元素左边的偏移,父元素没有定位以body为准 ele.offsetWidth 返回自身包括padding,边框,内容去的宽度 ele.offsetHeight 返回自身包括padding,边框,内容去的高度 ele.offse

mouseover和mouseenter的区别

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生.

【转】mouseover和mouseenter的区别

一.当绑定着两个事件的元素里面没有子元素的时候,这两个事件的触发效果是一致的: x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over").text(x+=1); }); $("div.enter").mouseenter(function(){ $(".enter").text(y+=1); }); }); &l

jQuery中 mouseover、mouseout、mouseenter、mouseleave的区别

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件,与其相对应的是mouseout只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件,与其相对应的是mouseleave 一.以下这个例子能很好的帮助我们理解mouseover和mouseenter的区别: 1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"

jquery mouseover与mouseenter,mouserout与mouseleave的区别

mouseover与mouseenter不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件只有在鼠标指针穿过被选元素时,才会触发mouseenter事件 <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.6.4.min.js">

jQuery mouseover与mouseenter,mouseout与mouseleave的区别

mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件.

曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. 在div里添加有子元素,刚开始使用mouseout ,结果每每都是鼠标还没放到刚显示出来的div上它就消失了,郁闷了半天改为le

jQuery中hover与mouseover和mouseout的区别分析

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex

mouseout、mouseover和mouseleave、mouseenter的区别

鼠标离开事件: mouseout:鼠标离开钡萱元素或其内部子元素时都会触发; mouseleave:只有鼠标离开被选元素时才会触发; 鼠标移入事件: mouseover:只有鼠标进入被选元素时才会触发; mouseenter:鼠标进入被选元素或其内部子元素时都会触发; mouseout.mouseover和mouseleave.mouseenter的区别,布布扣,bubuko.com