jquery mouseenter 在 child div 上的尺寸大于 parent div

Question

我有一个 parent div，高度为 100px，小于 child div，高度为 200px。

当我在 parent div 上附加 jquery mouseenter 时，即使我将指针悬停在 child 上（悬停在 child 它扩展了 parent 的高度）。

谁能解释一下？

$(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>

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

假设我们有一个 parent div，其中 width=100px 和 height=100px。
然后我们有一个 child div 和 width=200px 和 height=200px（比 parent 更大的面积）。
当我将鼠标悬停在 child 上时（ 但还没有在 parent 上悬停 ），浏览器计算出指针也在 parent 上，虽然不是。
因此，如果我在 child 和 parent 上都有一个处理程序，它们将在我输入 child 和 div 时触发。

谢谢。

Answer 1

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

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

Answer 2

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

.child{pointer-events: none}

"pointer-events: none":

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

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

Answer 3

试试这个：

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

e.isPropagationStopped() 告诉你方法 e.stopImmediatePropagation();叫做。我试过了，这对我有用。你必须 select child 而不是 parent

jquery mouseenter 在 child div 上的尺寸大于 parent div

jquery mouseenter on child div with bigger dimensions than parent div

html

javascript

css

jquery

jquery-events