What is the difference between these properties of the MouseEvent object?

  1. clientX/Y ,
  2. layerX/Y ,
  3. pageX/Y ,
  4. screenX/Y ,
  5. And just X/Y ?
  6. Just yet offsetX/Y noticed.

Most of them are the same. And the difference screenX/Y from the rest is clear.

    1 answer 1

    1. The coordinates of the mouse cursor relative to the window.
    2. Relative to the nearest parent layer. If the element that caused the event is a layer (that is, it has a value of the position property other than static), then the coordinate will be calculated relative to this element.
    3. Regarding the document.
    4. Coordinates relative to the monitor.
    5. The clientX/Y alias.
    6. Shows the indent of the mouse cursor in the X / Y axis from the edge of the target DOM node.
    • In which case regarding the window and the document will be different? - Qwertiy ♦
    • @Qwertiy, They will always be different. - Klym
    • one
      Something does not look like ... - Qwertiy ♦
    • Maybe I'm wrong. - Klym
    • one
      @Qwertiy good suggestion. I will give the decision to the one who organizes it. Although some will probably be repeated (5th item, just alias). - smellyshovel