最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - Why does document.elementFromPoint not find the top-most element? - Stack Overflow

matteradmin6PV0评论

In the documentation for document.elementFromPoint it states:

Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point.

But I do not see this behavior. Instead, it seems to select the bottom-most element. This is actually the behavior I want, but I am concerned as to why it doesn't match the documentation and I want to understand why in order to prevent possible future bugs.

I have created a fiddle to demonstrate this. If you click on the bolded but un-italicized text, it return the B, not the P. If you click the bolded and italicized text, it returns the I not the P. Isn't the paragraph the top-most element which contains all of these objects, or my definition of "topmost" different from the spec?

I have tried this on both Firefox and Chrome and get the same result in each.

In the documentation for document.elementFromPoint it states:

Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point.

But I do not see this behavior. Instead, it seems to select the bottom-most element. This is actually the behavior I want, but I am concerned as to why it doesn't match the documentation and I want to understand why in order to prevent possible future bugs.

I have created a fiddle to demonstrate this. If you click on the bolded but un-italicized text, it return the B, not the P. If you click the bolded and italicized text, it returns the I not the P. Isn't the paragraph the top-most element which contains all of these objects, or my definition of "topmost" different from the spec?

I have tried this on both Firefox and Chrome and get the same result in each.

Share Improve this question asked Jul 23, 2014 at 19:10 MichaelMichael 9,40115 gold badges74 silver badges138 bronze badges 4
  • Be very careful with this object because it is implemented differently in different browsers. Some browsers return the x,y position based on the window and some based on the viewport. See zehnet.de/2010/11/19/… for a good explanation. – Michael Commented Jul 23, 2014 at 19:15
  • @Michael No, I haven't read correctly the question (or there was an edit). And now I fail to see how OP could think it should not return I... If I follow the apparent reasonning, it should always return the document element... – Denys Séguret Commented Jul 23, 2014 at 19:16
  • @Michael thanks, I am looking at that now. – Michael Commented Jul 23, 2014 at 19:19
  • @dystroy cognitive dissonance. i was reading the spec one way and it was conflicting with mon sense and what i was observerating. – Michael Commented Jul 23, 2014 at 19:20
Add a ment  | 

1 Answer 1

Reset to default 8

You're misinterpreting the terminology.

By "top-most" they mean the one that has the highest z-index, or is above other elements in view, not in terms of hierarchy.

Post a comment

comment list (0)

  1. No comments so far