Question

标题说明了一切。我已经让孩子div在相对父级div内有绝对位置，并且想知道鼠标是在孩子身上还是在父母身上div在＆＃34;随机＆＃34;时间点。

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

以下示例HTML：

＆＃13;

$(document).ready(function() {
  $(".child").draggable();
  setTimeout(doSomething, 31415);
});


var doSomething = function() {
  // Edit content based on what is underneath the mouse
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

从某个位置获取元素是document.elementFromPoint function的目的：

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

要获取当前鼠标位置，请将监听器附加到mousemove（据我所知，没有本机方法可以在没有鼠标事件的情况下提取鼠标坐标）。这是一个示例小提琴：https://jsfiddle.net/xsLwt8Ld/

Answer 2

如果我理解正确，您想知道在任何给定时间，鼠标是在孩子身上还是在父母身上。您可以使用:hover伪类

来实现它

创建一个函数，检查是否有.child类:hover：

如果有，这意味着鼠标已超过.child（并且您拥有该元素），并且无需检查父级。
如果没有，请检查是否有任何.parent元素也包含您创建的类：
- 如果有：鼠标位于.parent但未超过.child;
- 如果没有：鼠标我没有.parent或.child。

实现这一目标的代码很简单：

function checkMouseOver() {
  if ($(".child:hover").length) {
    // mouse over a .child
  } else if ($(".parent:hover").length) {
    // mouse over a .parent (but not over .child)
  } else {
    // mouse not over a .parent or .child;
  }
}

一个简单的工作演示：

＆＃13;

$(".child").draggable();
// Edit content based on what is underneath the mouse

function checkMouseOver() {
  if ($(".child:hover").length) {
    alert("You were over " + $(".child:hover").text());
  } else if ($(".parent:hover").length) {
    alert("You were over " + $(".parent:hover").attr("id"));
  } else {
    alert("You are not over a .parent or .child");
  }
}

＆＃13;

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

＆＃13;

<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>

<button onclick="checkMouseOver()">Check where the mouse is</button>

<div  class="parent" id="parent1">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

<div  class="parent" id="parent2">
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>

＆＃13;

（单击页面并按选项卡直到进入按钮，然后将鼠标悬停在不同元素上并按 Enter 以触发功能）

如何在鼠标功能下获得顶级对象？

2 个答案: