Determine which element the mouse pointer is on top of in JavaScript

Question

I want a function that tells me which element the mouse cursor is over  So  for example  if the user s mouse is over this textarea  with id wmd-input   calling window which element is the mouse on   will be functionally equivalent to    quot  wmd-input quot

User · Answer

lt  -- One simple solution to your problem could be like this  -- gt    lt div gt   lt input type  text  id  fname  onmousemove  javascript  alert this id      gt   lt  -- OR -- gt   lt input type  text  id  fname  onclick  javascript  alert this id      gt   lt  div gt   lt  -- Both mousemove over the field  amp  click on the field displays  fname -- gt   lt  -- Works fantastic in IE  FireFox  Chrome  Opera  -- gt   lt  -- I didn t test it for Safari  -- gt

User · Answer

You can use this selector to undermouse object and then manipulate it as a jQuery object      hover   last

User · Answer

Let me start out by saying that I don t recommend using the method I m about to suggest  It s much better to use event driven development and bind events only to the elements you re interested in knowing whether or not the mouse is over with mouseover  mouseout  mouseenter  mouseleave  etc  If you absolutely must have the ability to know which element the mouse is over  you d need to write a function that binds the mouseover event to everything in the DOM  and then store whatever the current element is in some variable  You could so something like this  window which element is the mouse on    function          var currentElement          quot body   quot   on  mouseover   function e            if e target     e currentTarget                currentElement   this                         return function             console log currentElement                Basically  I ve created an immediate function which sets the event on all elements and stores the current element within the closure to minimize your footprint  Here s a working demo that calls window which element is the mouse on every second and logs what element the mouse is currently over to the console  http   jsfiddle net LWFpJ 1

User · Answer

Here s a solution for those that may still be struggling  You want to add a mouseover event on the  parent  element of the child element s  you want detected  The below code shows you how to go about it  const wrapper   document getElementById  wrapper     parent element const position   document getElementById  quot displaySelection quot    wrapper addEventListener  mousemove   function e      let elementPointed   document elementFromPoint e clientX  e clientY     console log elementPointed       Demo on CodePen

User · Answer

You can look at the target of the mouseover event on some suitable ancestor   var currentElement   null   document addEventListener  mouseover   function  e        currentElement   e target        Here   s a demo

User · Answer

In newer browsers  you could do the following   document querySelectorAll    hover       That ll give you a NodeList of items that the mouse is currently over in document order   The last element in the NodeList is the most specific  each preceding one should be a parent  grandparent  and so on

User · Answer

Mouseover events bubble  so you can put a single listener on the body and wait for them to bubble up  then grab the event target or event srcElement   function getTarget event        var el   event target    event srcElement      return el nodeType    1  el   el parentNode      lt body onmouseover  doSomething getTarget event     gt

User · Answer

DEMO There s a really cool function called document elementFromPoint which does what it sounds like  What we need is to find the x and y coords of the mouse and then call it using those values  var x   event clientX  y   event clientY      elementMouseIsOver   document elementFromPoint x  y    document elementFromPoint jQuery event object

User · Answer

Although the following may not actually answering the question  since this is the first result of googling  the googler may not asking exactly the same question    hope it will provide some extra input  There are actually two different approaches to get a list of all elements the mouse is currently over  for newer browsers  perhaps   The  quot structural quot  approach - Ascending DOM tree As in dherman s answer  one can call var elements   document querySelectorAll   hover     However  this assumes that only children will overlay their ancestors  which is usually the case  but not true in general  especially when dealing with SVG where element in different branches of the DOM tree may overlap each other  The  quot visual quot  approach - Based on  quot visual quot  overlapping This method uses document elementFromPoint x  y  to find the topmost element  temporarily hide it  since we recover it immediately in the same context  the browser will not actually renders this   then go on to find the second topmost element    Looks a little hacky  but it returns what you expect when there are  e g   siblings elements in a tree occluding each other  Please find this post for more details  function allElementsFromPoint x  y        var element  elements           var old visibility           while  true            element   document elementFromPoint x  y           if   element    element     document documentElement                break                    elements push element           old visibility push element style visibility           element style visibility    hidden      Temporarily hide the element  without changing the layout            for  var k   0  k  lt  elements length  k              elements k  style visibility   old visibility k             elements reverse        return elements     Try both  and check their different returns

User · Answer

The following code will help you to get the element of the mouse pointer  The resulted elements will display in the console  document addEventListener  mousemove   function e        console log document elementFromPoint e pageX  e pageY

User · Answer

The target of the mousemove DOM event is the top-most DOM element under the cursor when the mouse moves    function          Don t fire multiple times in a row for the same element     var prevTarget null      document addEventListener  mousemove   function e              This will be the top-most DOM element under cursor         var target e target          if target   prevTarget               console log target               prevTarget target                            This is similar to  Philip Walton s solution  but doesn t require jQuery or a setInterval

User · Answer

Demo  D Move your mouse in the snippet window  D  x000D   x000D   lt script gt  document addEventListener  mouseover   function  e        console log   You are in    e target tagName        lt  script gt  x000D   x000D   x000D

User · Answer

elementFromPoint   gets only the first element in DOM tree  This is mostly not enough for developers needs  To get more than one element at e g  the current mouse pointer position  this is the function you need  document elementsFromPoint x  y       Mind the  s  in elements  This returns an array of all element objects under the given point  Just pass the mouse X and Y values to this function  More information is here  DocumentOrShadowRoot elementsFromPoint   For very old browsers which are not supported  you may use this answer as a fallback

[javascript] Determine which element the mouse pointer is on top of in JavaScript

Examples related to javascript

Examples related to dom

Examples related to mouse