【发布时间】：2014-09-22 18:06:57
【问题描述】：
当我将鼠标悬停在 sidebar 内的 element 上时，我被困了 2 个小时，试图找出为什么在控制台中我可以看到“鼠标离开”。问题是只有当我从顶部输入鼠标我才能在控制台中看到日志。 Chrome 37.0.2062.120 m（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 文件中或以全页模式查看 sn-p。
编辑如果您运行以下 sn-p，您将进入控制台，从顶部进入绿色区域仅一次。
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
【问题讨论】：
-
您的 sn-p 在 Chrome 和 Safari 中运行良好。
-
我认为 OP 的意思是当您从顶部输入元素并且它与顶部的浏览器 UI 齐平时，您会在 Chrome 中看到一个额外的
mouseleave事件被触发。要查看此内容，请单击示例上的完整页面。 -
我制作了一个视频来展示这一点。 drive.google.com/file/d/0B-eYll72UzMteFZWM1hjeFd1ZFk/… 。对不起质量。在视频中，您可以看到如果我
mouse enter到黄色部分，则mouse leave未记录，但如果我从顶部mouse enter，则记录该事件。 -
我觉得刷新与 Chrome 中的行为无关。此外，当控制台也与该区域重叠时，这似乎也会发生。我猜这是Chrome中的一个错误。有趣的是，如果您为
div添加边距，它会解决问题，但前提是它们移动鼠标的速度足够慢，以便浏览器检测到它已进入边距。 -
我在想这是 CSS 的问题，但我看不出有什么问题。（如果有的话）
标签： javascript jquery google-chrome