鼠标离开是错误的

时间：2014-09-22 18:06:57

标签： javascript jquery google-chrome

我被困了2个小时试图找到为什么在控制台中我可以看到“鼠标离开”当我将鼠标悬停在element内的sidebar时。问题是仅当我从顶部输入鼠标时，我可以在控制台中看到日志。 Chrome浏览器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

1 个答案:

答案 0 :(得分：0)

您的代码工作正常，因此使用本机版本。 

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>

相关问题
最新问题