事件mouseover/out和mouseenter/leave

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

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

对于mouseover和mouseenter两个事件，最大的区别就是mouseenter是不冒泡的事件。对于mouseover事件来说 当鼠标从其他元素移动到child节点时发生 但此事件会冒泡 所以会导致parent也触发mouseover。如果我们对parent注册了mouseover监听， 从parent移动到child同样触发parent的mouseover。如果注册的监听是mouseenter的话，无论鼠标从任何元素移动到child时，只有child元素发生mouseenter事件，而他的祖宗节点都不会因为冒泡而触发此事件。对于mouseout和mouseleave也是如此，当鼠标从child移出时，mouseout同样会冒泡到parent，从而触发parent的mouseout，而mouseleave同样无此问题。

事件mouseover/out和mouseenter/leave,布布扣,bubuko.com

时间： 2024-10-19 23:41:58

事件mouseover/out和mouseenter/leave的相关文章

jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 （css控制span标签）

<script> $(function(){ var text ; $(".pos span").each(function(){ text = $(this).text().trim(); if(text=="设为默认"){ $(this).css('display','none'); } }); $(".pos").mouseover(function(){ //鼠标移进显示效果 text = $(this).find('span

鼠标事件之鼠标滑过事件MOUSEOVER

来源地址:http://www.g2room.com/jquery/index.php?p=example%2Fevent%2Fmouseover.html&n=%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E4%B9%8B%E9%BC%A0%E6%A0%87%E6%BB%91%E8%BF%87%E4%BA%8B%E4%BB%B6MOUSEOVER var i = 0; // 定义当事件触发后执行的方法 function showContent (event){ $(

JQ事件和事件对象

1 事件 一 .鼠标事件 1.ready()页面载入事件:载入文档节点 2 click()熟悉的单击事件 3 dbclick()双击事件 4 mousedown() /mouseup() 鼠标按下和松开事件 5 mouseover()/mouseout() 鼠标移入和移出事件 6 mouseenter()/mouseleave() 鼠标移入移出事件 //mouseover()/mouseout()和mouseenter()/mouseleave()的区别 首先来了解一下事件冒泡和捕获 事件冒泡:

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

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

理解mouseover,mouseout,mouseenter,mouseleave

mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数. 注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. ? 1 2 3 <div class="parent">父亲             <div

【原创】解决鼠标经过子元素触发mouseout，mouseover事件的问题

关键词:父子元素关系  mouseout  mouseover  事件  事件冒泡 初期代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="jquery.js"></script> 5 <meta charset="utf-8"> 6 <title>mouseover mouseout</title> 7 <

基础事件(一)

JavaScript有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发.jQuery为开发者更有效率的编写事件行为, 封装了大量有益的事件方法供我们使用. 绑定事件 在JavaScript课程的学习中,我们掌握了很多使用的事件,常用的事件有:click.dblclick.mousedown.mouseup.mousemove.mouseover.mouseout.change. select.submit.keydown.keypress.k

jquery事件之事件

事件名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) blur() 获得失去鼠标光标焦点事件 jQueryObject.blur( [ [ data ,]  handler ] ) change() 在文本内容或选项被更改时触发.该事件仅适用于<input type="text">和<textarea>以及<select> jQueryObject.change( [ [ data ,]

jquery事件之事件处理函数

一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数.没用on关键字 jQueryObject.bind( events [, data ], handler ) One 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数.只绑定一次 jQueryObject.one( events [, data ], handler