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();
});

Answer 2

试试这个：

    $(".child").mouseover(function(e) {
    e.stopImmediatePropagation();
    console.log(e.isPropagationStopped());
    console.log(e.currentTarget);
});

e.isPropagationStopped() 告诉你方法 e.stopImmediatePropagation();叫做。我试过了，这对我有用。而且你必须选择孩子而不是父母

Answer 3

在你的 CSS 中使用它。它删除子元素上的所有鼠标事件。 （也不能悬停...）

.child{pointer-events: none}

“指针事件：无”：

元素永远不是鼠标事件的目标；但是，如果这些后代元素的指针事件设置为其他值，则鼠标事件可能会针对其后代元素。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间适当地触发此父元素上的事件侦听器。

来源：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events