mouseleave与mouseout区别

简介:

mouseleave:

当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与 mouseenter 事件一起使用。


mouseout:

当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。


区别:

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。


实例见:

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout


比如以下情况就只能用:mouseleave

wKiom1L53eGwmkxHAAB7FMPEgGU603.jpg

需要点击历史登录账号时,

1、获取到用户名并赋值到input框中;

2、同时隐藏class="selectItemhidden"的div(如图红色区域的“账号登录历史"div)。


BUG:如果用mouseout,鼠标一移上去,红色区域的div就消失了,导致获取不到账号值。(原因就是selectItemhidden中还包含多个div


附代码:


1
2
3
4
5
6
7
8
9
10
$( ".selectSubList" ).click( function (){
     var  nowSelectName=$( this ).text();
     $( ".selectItemhidden" ).hide();
     $( "#name" ).val(nowSelectName);
     $( "#pass" ).focus();
});
                                                                                 
$( '.selectItemhidden' ).mouseleave( function (){
     $( ".selectItemhidden" ).hide();
});



jquery事件大全:

http://www.w3school.com.cn/jquery/jquery_ref_events.asp






      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1358152,如需转载请自行联系原作者




相关文章
|
10月前
|
JavaScript 前端开发
事件绑定(onclick,onfocus,onblur)
事件绑定(onclick,onfocus,onblur)
132 0
|
4月前
|
设计模式 JavaScript 前端开发
addEventlistener和正常的onclick=()=> 的区别
【10月更文挑战第29天】`addEventListener` 是一种更推荐的添加事件处理函数的方式,它提供了更好的灵活性、可维护性和代码结构,能够满足复杂的事件处理需求,而 `onclick` 属性则更适合简单的、一次性的事件绑定场景,且在现代的JavaScript开发中,应尽量避免在HTML中直接使用 `onclick` 属性,以提高代码的质量和可维护性。
|
10月前
|
JavaScript 前端开发
事件绑定(onmouseout,onmouseover)
事件绑定(onmouseout,onmouseover)
61 0
|
10月前
onkeydown、onkeypress、onkeyup的区别
onkeydown、onkeypress、onkeyup的区别
mouseover、mouseout和mouseenter、mouseleave之间的区别(配对使用)
mouseover、mouseout和mouseenter、mouseleave之间的区别(配对使用)
122 0
|
JavaScript
Vue 实现 Hover 功能( mouseover 与 mouseenter 的区别)
Vue 实现 Hover 功能( mouseover 与 mouseenter 的区别)
418 0
|
存储 C++ 开发者
QListWidget和QListView的使用和item点击事件
QListWidget和QListView的使用和item点击事件
|
JavaScript
BOM ------ mouseenter 和 mouseover 的区别
BOM ------ mouseenter 和 mouseover 的区别
|
前端开发
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
前言 offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到,如果小伙伴们没有经常使用的话,很容易把这些属性搞混,比如说什么窗口高度、元素高度、内容高度等等。当然,现在的前端框架很多时候帮我们封装了这些属性,但是我们也不能太过依赖框架,底层的原理我们还是需要了解的,今天就来理一理这三个属性分别代表什么?
260 0
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
|
存储 C#
C#(三十)之C#comboBox ListView treeView
本篇内容记录了comboBox下拉列表框属性、ListView 列表视图属性、ListView 列表视图事件、treeView树状视图属性。
291 0
C#(三十)之C#comboBox ListView treeView