How to get top level object under the mouse function?

Question

Title says it all. I've got child div's with absolute positions inside a relative parent div, and would like to know whether the mouse is over a child or a parent div at a "random" point in time.

Hypothetically, I'd like to call the .mouseover method and perform a .hasclass test on the highest level object to see if it has the child class or not. However, .mouseover is an event handler, thus not something I could just call to get the relevant information.

Example HTML below:

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

It's difficult to draw specifics from your hypothetical so this may be way off target, but is it possible to put an event listener on all the child elements instead of the parent? That way no test is required. If not, maybe you could elaborate on why you can't go about it that way? — Strixy, Jun 03 '15 at 22:35
You want to know if at any given time you are over a `.child` div or just over the `.parent` (but not over a `.child`, is that correct? — Alvaro Montoro, Jun 03 '15 at 22:45
@Strixy I should have elaborated more in the question, apologies on that one. I can't use an event listener as, at the point of usage I would already be inside an event handler. I will update the question to make this clearer for other people after work, however Alvaro Montoro has already answered the question! — user3303504, Jun 04 '15 at 05:29

score 2 · Answer 1 · answered Jun 04 '15 at 00:19

2

Getting an element from a position is what the document.elementFromPoint function was designed to do:

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

To get the current mouse position, attach a listener to mousemove (as far as I know there is no native method to extract mouse coordinates without a mouse event). Here's an example fiddle showing this: https://jsfiddle.net/xsLwt8Ld/

answered Jun 04 '15 at 00:19

blgt

8,135
1
25
28

there _is_ a way to get the mouse coords without mouse movement, i just saw it on here the other day, but now i can't find it. – dandavis Jun 04 '15 at 00:39
@blgt +1 Thanks for the excellent answer! I had to give the correct solution to Alvaro Montoro though as he answered first with an equally correct solution. – user3303504 Jun 04 '15 at 05:34
@dandavis This maybe? http://stackoverflow.com/questions/2601097/how-to-get-the-mouse-position-without-events-without-moving-the-mouse – blgt Jun 04 '15 at 08:48
yeah! mouseenter, that's the ticket! you should be able to feed those event object props to your elementFromPoint() for fool-proof coverage. a very nice professional solution for far more cases than the OPs likely needs. – dandavis Jun 04 '15 at 22:05

score 1 · Accepted Answer · answered Jun 03 '15 at 23:12

If I understood correctly, you want to know if at any given time, the mouse is over the child or directly over the parent. You could achieve it by using the :hover pseudoclass

Create a function that checks if there is any .child that has the :hover class:

If there is, that means that the mouse is over a .child (and you have the element) and there's no need to check the parent.
If there isn't, then check if there is any .parent element that also has the class that you created:
- If there is: the mouse is over a .parent but not over a .child;
- If there is not: the mouse i not over a .parent or a .child.

The code to achieve this is simple:

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

A simple working demo:

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

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

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

(Click on the page and press tab until you get into the button, then mouse over the different elements and press Enter to trigger the funtion)

relevant? http://stackoverflow.com/questions/24538450/get-element-currently-under-mouse-without-using-mouse-events/24540416#24540416 — dandavis, Jun 04 '15 at 00:42
That is interesting an relevant as the idea is similar. It would be really useful if OP wants to know the deepest element (independent of the class), as my solution focuses only in the `.child` class — Alvaro Montoro, Jun 04 '15 at 03:02

How to get top level object under the mouse function?

2 Answers2