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

admin管理员组

文章数量:1025814

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.

• javascript
• html

Share Improve this question Follow asked Jul 23, 2014 at 19:10 MichaelMichael 9,4011515 gold badges7474 silver badges138138 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

Sorted by: 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.

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.

• javascript
• html

Share Improve this question Follow asked Jul 23, 2014 at 19:10 MichaelMichael 9,4011515 gold badges7474 silver badges138138 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

Sorted by: 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.

本文标签： javascriptWhy does documentelementFromPoint not find the topmost elementStack Overflow