javascript - jquery mouseenter 在尺寸大于父 div 的子 div 上

Question

我有一个 height=100px 的父 div，它小于 height=200px 的子 div。

当我在父 div 上附加 jquery mouseenter 时，即使我将指针悬停在子元素上(悬停在扩展父元素高度的子元素部分)，事件也会触发。

谁能解释一下？

$(document).ready(function() {
		$(".parent").mouseover(function(e) {
			console.log(e.target);
		});
		$(".child").mouseover(function(e) {
			console.log(e.target);
		});
		$(".grandchild").mouseover(function(e) {
			console.log(e.target);
		});
	});

.parent {
			background-color: green;
			height: 50px;
		}
		.child {
			background-color: red;
			height: 100px;
		}
		.grandchild {
			background-color: blue;
			height: 200px;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
		<div class="child">
			<div class="grandchild">
				Test
			</div>
		</div>
	</div>

--更新--起初我不清楚到底是什么问题。现在我想我明白了(我更新了代码)。

假设我们有一个 width=100px 和 height=100px 的父 div。
然后我们有一个 width=200px 和 height=200px 的子 div(比父区域大)。
当我将鼠标悬停在子项上时(但尚未在父级上)，浏览器计算出指针也在父级上，尽管它没有。
因此，如果我在子级和父级上都有一个处理程序，它们将在我仅进入子 div 时同时触发。

谢谢。

Answer 1

您可以阻止事件从子级传播到父级，这样当您越过子级时它就不会在父级触发:

$(".child").mouseover(function(e) {
    e.stopPropagation();
});