鼠标离开触发错误

mouse leave is triggered wrong

本文关键字：错误 离开 鼠标      更新时间：2023-09-26

我被困了两个小时，试图找出为什么当我把鼠标放在sidebar内的element上时，在控制台中我可以看到"鼠标离开"。问题是只有当我从顶部输入鼠标时，我才能在控制台中看到日志铬37.0.2062.120米（64位）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
	<style type="text/css">
		* { margin:0; padding:0; }
		html,body{ height:100%; }
		#sidebar{ position: relative; width:200px; height:400px; background:green; overflow: hidden;}
		.elementToScroll { float:left; width:100%; }
	</style>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$('.element').on('mouseleave', function(){
				console.log("mouse leave");
			});
		});
	</script>
</head>
<body>
	<div id="sidebar">
		<div class="element">
			<p style="background-color:red;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:yellow;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:orange;">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
			</p>
			<p style="background-color:maroon;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:black;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
		</div>
	</div>
</body>
</html>

您应该将所有代码保存在html文件中，或者在"全页"模式下查看代码段

编辑如果运行以下代码段，您将进入控制台，从顶部进入绿色区域仅一次。

mouse enter 
mouse leave
mouse enter


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">
		*{margin:0; padding:0;}
		#sidebar {width: 200px; height:400px; background:green; position:relative;}
		.element {width: 100%; height:100%;}
	</style>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.element').on('mouseleave', function(){
				console.log('mouse leave');
			});
			$('.element').on('mouseenter', function(){
				console.log('mouse enter');
			});
		});
	</script>
</head>
<body>
	<div id="sidebar">
		<div class="element">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam dolore adipisci minima deserunt, provident ex distinctio corporis quam ipsam harum ea omnis, officiis libero voluptatum nobis accusantium. Ducimus, sequi, deleniti.</p>
		</div>
	</div>
</body>
</html>

由于这件事似乎只发生在chrome中，我在问题中添加了google-chrome标签。

显示该问题的视频：https://drive.google.com/file/d/0B-eYll72UzMteFZWM1hjeFd1ZFk/edit?usp=sharing

您的代码在本机版本中运行良好。

var elmn = document.getElementsByClassName("element");
for (var i=0; i<elmn.length; i++){
  elmn[i].onmouseleave = function(){
    console.log("mouse leave")
  }
}
  
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
	<style type="text/css">
		* { margin:0; padding:0; }
		html,body{ height:100%; }
		#sidebar{ position: relative; width:200px; height:400px; background:green; overflow: hidden;}
		.elementToScroll { float:left; width:100%; }
	</style>
</head>
<body>
	<div id="sidebar">
		<div class="element">
			<p style="background-color:red;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:yellow;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:orange;">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
			</p>
			<p style="background-color:maroon;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:black;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
		</div>
	</div>
</body>
</html>

相关文章：