jQuery中mouseover（）和mouseenter（）之间的区别

最新推荐文章于 2022-11-13 19:29:10 发布

cyan20115

最新推荐文章于 2022-11-13 19:29:10 发布

阅读量553

点赞数

文章标签： javascript ViewUI

在jQuery中，当鼠标进入匹配的元素时，都会触发mouseover（）和mouseenter（）事件。唯一的不同是子元素中“ 事件冒泡 ”句柄的方式，让我们看两种情况：

1.没有子元素

如果匹配的元素没有子元素，则mouseover（）和mouseenter（）事件的工作原理完全相同。请参阅下面自己尝试。

2.内含子元素

如果匹配的元素具有子元素，则mouseover（）和mouseenter（）事件在“ 事件冒泡 ”方面的工作方式有所不同：

例如，“ outerBox”包含一个子元素“ innerBox”。

<div id="outerBox">OuterBox
	<div id="innerBox">InnerBox
	</div>
</div>

PS确保externalBox和innerBox都附加到某些事件。

鼠标移到（）

当鼠标进入“ outerBox”时，触发“ outerBox”事件。
当鼠标进入“ innerBox”时，触发“ innerBox”事件，然后触发“ outerBox”事件。
当鼠标回到“ outerBox”时，触发“ outerBox”事件。

mouseenter（）

当鼠标进入“ outerBox”时，触发“ outerBox”事件。
当鼠标进入“ innerBox”时，触发“ innerBox”事件。
当鼠标回到“ outerBox”时，将不会触发任何事件。

是的，这很令人困惑并且用“单词”理解，请通过播放以下示例来理解它：

自己尝试

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#mouseover-outerBox1, #mouseenter-outerBox1,
	#mouseover-outerBox2, #mouseenter-outerBox2{
		margin:8px;
		border:1px groove #999966;
		background-color : #999966;
		width:150px;
		height:150px;
		color:white;
	}
	#mouseover-innerBox2, #mouseenter-innerBox2{
		margin:8px 8px 8px 16px;
		border:1px groove #0000FF;
		background-color : #0000FF;
		width:100px;
		height:100px;
		color:white;
	}
	span{
		padding:8px;
	}
	.content{
		width:500px;
		height:250px;
	}
	.container1{
		float:left;
		padding-right:16px;
	}
</style>

</head>
<body>
  <h1>jQuery mouseover() vs mouseenter() example</h1>

<div class="content">
  <div class="container1">
	  <span>mouseover() - no child element</span>
	  <div id="mouseover-outerBox1">OuterBox
	  </div>
	  <span id="mouseover-msg1">#mouseover is fired : 0</span>
  </div>

  <div class="container1">
  	  <span>mouseenter() - no child element</span>
	  <div id="mouseenter-outerBox1">OuterBox
	  </div>
	  <span id="mouseenter-msg1">#mouseenter is fired : 0</span>
  </div>
</div>



<div class="content">
  <div class="container1">
	  <span>mouseover() - with child elements</span>
	  <div id="mouseover-outerBox2">OuterBox
	  	<div id="mouseover-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseover-outer-msg2">#mouseover outer is fired : 0</span>
          <br/>
	  <span id="mouseover-inner-msg2">#mouseover inner is fired : 0</span>
  </div>

  <div class="container1">
  	  <span>mouseenter() - with child elements</span>
	  <div id="mouseenter-outerBox2">OuterBox
	  	<div id="mouseenter-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseenter-outer-msg2">#mouseenter outer is fired : 0</span>
          <br/>
	  <span id="mouseenter-inner-msg2">#mouseenter inner is fired : 0</span>
  </div>
</div>

<script type="text/javascript">

//example 1
var mouseover1=1;
$('#mouseover-outerBox1').mouseover(function(event) {
  $('#mouseover-msg1').text('#mouseover is fired : ' + mouseover1++)
});

var mouseenter1=1;
$('#mouseenter-outerBox1').mouseenter(function(event) {
  $('#mouseenter-msg1').text('#mouseenter is fired : ' + mouseenter1++)
});

//example 2
var mouseoverouter2=1;
$('#mouseover-outerBox2').mouseover(function(event) {
  $('#mouseover-outer-msg2')
              .text('#mouseover outer is fired : ' + mouseoverouter2++)
});

var mouseoverinner2=1;
$('#mouseover-innerBox2').mouseover(function(event) {
  $('#mouseover-inner-msg2')
              .text('#mouseover inner is fired : ' + mouseoverinner2++)
});

var mouseenterouter2=1;
$('#mouseenter-outerBox2').mouseenter(function(event) {
  $('#mouseenter-outer-msg2')
              .text('#mouseenter outer is fired : ' + mouseenterouter2++)
});

var mouseenterinner2=1;
$('#mouseenter-innerBox2').mouseenter(function(event) {
  $('#mouseenter-inner-msg2')
               .text('#mouseenter inner is fired : ' + mouseenterinner2++)
});

</script>
</body>
</html>

试试演示

标签： jQuery 鼠标移动

翻译自: https://mkyong.com/jquery/different-between-mouseover-and-mouseenter-in-jquery/

cyan20115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中mouseover（）和mouseenter（）之间的区别

在jQuery中，当鼠标进入匹配的元素时，都会触发mouseover（）和mouseenter（）事件。唯一的不同是子元素中“ 事件冒泡 ”句柄的方式，让我们看两种情况： 1.没有子元素如果匹配的元素没有子元素，则mouseover（）和mouseenter（）事件的工作原理完全相同。请参阅下面自己尝试。 2.内含子元素如果匹配的元素具有子元素，则mouseover（）...
复制链接

扫一扫