mouseout、mouseover和mouseleave、mouseenter区别

mouseenter:当鼠标移入某元素时触发。

mouseleave:当鼠标移出某元素时触发。

mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。

mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发。

mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发。

mouseout、mouseover和mouseleave、mouseenter最大的区别,在于子元素连带触发。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.a{
width: 500px;
height: 500px;
background: aliceblue;
}
.b{
width: 200px;
height: 200px;
background: beige;
}
.c{
width: 100px;
height: 100px;
background: violet;
}
</style>
</head>
<body>
<div class="a">A
<div class="b"
onmouseenter="mouseenter()"
onmouseleave="mouseleave()"
onmouseout="mouseout()"
onmouseover="mouseover()"
onmousemove="mousemove()">B
<div class="c">C
</div>
</div>
</div>
<script>
function mouseenter(){
console.log(‘mouseenter‘)
}
function mouseleave(){
console.log(‘mouseleave‘)
}
function mouseout(){
console.log(‘mouseout‘)
}
function mouseover(){
console.log(‘mouseover‘)
}
function mousemove(){
console.log(‘mousemove‘)
}
</script>
</body>
</html>

时间: 2024-10-06 12:04:06

mouseout、mouseover和mouseleave、mouseenter区别的相关文章

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

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

mouseout、mouseover和mouseleave、mouseenter的区别

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

细说mouseenter和mouseover,mouseleave和mouseout的区别!!超级蛋疼的体验

昨天在写一个项目的时候发现了一个比较蛋疼的问题.就是在写一个鼠标移入移出的效果的时候发现在用mouseover和mouseout会有些诡异的效果就是在鼠标移入更多的时候会出现一个下拉框,需求是当鼠标离开下面的框框后再消失,但是当鼠标一旦移到下面的框框的时候整个框框就消失了.最开始我用的是hover()方法,如下: $(function(){$("#header .more1").hover(function(){ $("#header .more").show();

mouseover,mouseout,mouseenter,mouseleave的区别

相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况.      后来对比了mouseover,mouseout,mouseenter,mouse

mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript">

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">

事件mouseover/out和mouseenter/leave

不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发mouseenter事件.对应mouseleave 对于mouseover和mouseenter两个事件,最大的区别就是mouseenter是不冒泡的事件.对于mouseover事件来说 当鼠标从其他元素移动到child节点时发生 但此事件会冒泡 所以会导致parent也触发mouseover.如果我们对parent注册了mouseover监听, 从parent移动到c

mouseover与mouseenter、 mouseout与mouseleave的区别

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

mouseover与mouseenter,mouseout与mouseleave的区别

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