How to get the DOM element under the current position of the mouse, or determine whether there are any elements in the current position.

how do I get the ID, of the DOM element in the current position of the mouse or determine if there is a DOM element in the current position?

the mouse is followed by a picture and is written with the onmousemove method. I don"t know if it will affect the DOM element that gets the current position of the mouse.

thought about using collisions, but there are so many DOM elements on the page that collisions can only be done one-to-one. The picture that follows the mouse movement accounts for one. So how do the remaining DOM elements load into the second position, using an array? No, or the algorithm. Ask for advice.

Mar.05,2021

of course there must be DOM elements in the current location, at least body and document elements fill the entire form space. Oh, it's also possible that if you bind mousemove to window, mousemove will also be triggered when you move the mouse out of the window when mousedown, but you should pay attention to this.

key API: document.elementFromPoint

var element = document.elementFromPoint (x, y);

well, if you give an XJI y coordinate, the API will return to you the top DOM element of that point. Caniuse.com shows that this API is compatible with IE6! It is surprising that few people know about such an easy-to-use API. elementFromPoint compatibility

it looks like the element that the mouse follows is at the top? It doesn't matter, set css point-events: none, for this image so that it doesn't exist for the mouse, so that document.elementFromPoint can return the DOM you want.


bind onmousemove events to document, and then use event.currentTarget to judge?
mm-hmm. I have never known such a requirement


only knows that there are document.elementFromPoint () and document.elementsFromPoint () API (note the difference is that there is no s), after the element but has not been used. So I don't know how to be compatible. Please refer to MDN-elementsFromPoint and javascript Standard reference tutorial-document object ~

< hr >

there is more than one unpopular API. For example, you can refer to jjc's frontend knowledge points that you may not know

.

should be possible with event delegates. Specifically, let the parent element listen to onmoseenter or other events, and judge the parent element when the child element triggers.

Menu