javascript - 如何在鼠标功能下获取顶级对象？

Question

标题说明了一切。我有 child div在相对父项中具有绝对位置 div , 并想知道鼠标是在 child 还是 parent 身上 div在“随机”时间点。

假设，我想调用 .mouseover方法并执行 .hasclass测试最高级别的对象，看看它是否有 child类与否。然而，.mouseover是一个事件处理程序，因此我不能调用它来获取相关信息。

下面的示例 HTML:

$(document).ready(function() {
  $(".child").draggable();
  setTimeout(doSomething, 31415);
});


var doSomething = function() {
  // Edit content based on what is underneath the mouse
}

.parent {
  width: 100%;
  height: 1000px;
  position: relative;
  background: #f0f0f0;
}
.child {
  width: 300px;
  height: 100px;
  position: absolute;
  background: #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

从一个位置获取一个元素就是document.elementFromPoint function旨在:

document.elementFromPoint(mousePosition.x, mousePosition.y);

要获取当前鼠标位置，请将监听器附加到 mousemove(据我所知，没有本地方法可以在没有鼠标事件的情况下提取鼠标坐标)。这是一个显示此内容的示例 fiddle :https://jsfiddle.net/xsLwt8Ld/