e.clientX & e.clientY Coordinates relative to window Calculated from the window top/left edge e.pageX & e.pageY Coordinates relative to the document Calculated from the document top/left edge Scroll is considered e.clientY = e.pageY until page is scrolled e.screenX & e.screenY Coordinates relative to physical screen
document.documentElement.addEventListener("mousemove", function (e) {
console.log(`clientX ${e.clientX} / clientY ${e.clientY} `)
console.log(`pageX ${e.pageX} / pageY ${e.pageY}`)
console.log(`screenX ${e.screenX} / screenY ${e.screenY}`)
})
/*
clientX 395 / clientY 231
pageX 395 / pageY 1263 // page is scrolled
screenX 484 / screenY 378 // browser is away from the top left corner
*/
getBoundingClientRect() Window relative coordinates for a minimal rectangle that encloses an element has properties bottom height , left , right , top , width , x , y .bottom from top window side to bottom el's edge .bottom from left window side to right el edge same coordinates as in clientX/Y don’t have to round coordinates when setting to style.left & style.top
const rect = document.querySelector('button').getBoundingClientRect()
rect.bottom // 411.296875 // from top window side to bottom el edge // not as "bottom" CSS with position "fixed"
rect.height // 40
rect.left // 265.5
rect.right // 370.5 // from left window side to right el edge // not as "right" CSS with position "fixed"
rect.top // 371.296875
rect.width // 105
rect.x // 265.5 // no support by IE
rect.y // 371.296875 // no support by IE
function getCoords(el) {
let box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset,
right: box.right + window.pageXOffset,
bottom: box.bottom + window.pageYOffset,
left: box.left + window.pageXOffset
}
}
Show message under element
function createMessageUnder(elem, html) {
let message = document.createElement('div')
message.style.cssText = "position:absolute; color: red"
let coords = getCoords(elem)
message.style.left = coords.left + "px"
message.style.top = coords.bottom + "px"
message.innerHTML = html
return message
}
let elem = document.getElementById("innerDiv2")
let message = createMessageUnder(elem, 'Hello, world!')
document.body.append(message)
setTimeout(() => message.remove(), 5000)
document.elementFromPoint(x, y) returns the most nested element at window coordinates (x, y) Return the tag of the element that is in the middle of the window
let centerX = document.documentElement.clientWidth / 2
let centerY = document.documentElement.clientHeight / 2
let elem = document.elementFromPoint(centerX, centerY)
elem.style.background = "red"
console.log(elem.tagName)
// element may be different depending on the current scroll position
// For out-of-window coordinates the elementFromPoint returns null
Coordinates relative to element Ones I needed to get distance (coordinates) of cursor from top & bottom of container At first we need to know the coordinates of our container relative to the screen with getBoundingClientRect() And then we need to know the cursor coordinates relative to the screen with e.clientY And just calculate the distance
function movePasteTextAfterCursor(e: MouseEvent) {
const item = (e.target as Element).closest('.item')
if (!item) return
const { height, top } = item.getBoundingClientRect()
const yWithinElement = e.clientY - top
const distToTop = yWithinElement
const distToBottom = height - yWithinElement
let pastePlace
if (distToTop / height < 0.1) {
pastePlace = { pastePos: 'top', itemId: item.id }
} else if (distToBottom / height < 0.1) {
pastePlace = { pastePos: 'bottom', itemId: item.id }
} else {
pastePlace = { pastePos: 'middle', itemId: item.id }
}
if (hash(prevPastePlace) === hash(pastePlace)) return
store.dispatch(addPasteText(pastePlace))
store.dispatch(savePastePlace(pastePlace))
prevPastePlace = structuredClone(pastePlace)
}