在網(wǎng)頁開發(fā)中，有時(shí)需要通過鼠標(biāo)或其他觸發(fā)事件的坐標(biāo)位置，獲取該位置下的節(jié)點(diǎn)信息。在這種情況下，javascript 提供了一種非常便捷、簡單的方法，通過坐標(biāo)獲取節(jié)點(diǎn)信息。

通過坐標(biāo)獲取節(jié)點(diǎn)信息，一般是在鼠標(biāo)或觸摸事件中使用的。在實(shí)際開發(fā)中，比較常用的情況是通過鼠標(biāo)位置獲取當(dāng)前鼠標(biāo)所在的節(jié)點(diǎn)信息。舉個(gè)例子，假設(shè)我想獲取當(dāng)前鼠標(biāo)所在的 li 元素，可以使用如下代碼：

document.addEventListener('mousemove', e => {
const x = e.clientX;
const y = e.clientY;
const element = document.elementFromPoint(x, y);
if (element.nodeName === 'LI') {
console.log('current element is a li');
}
})

上面的代碼通過監(jiān)聽 mousemove 事件，在事件觸發(fā)時(shí)獲取鼠標(biāo)的 x、y 坐標(biāo)，然后使用 document.elementFromPoint 方法獲取該坐標(biāo)下的節(jié)點(diǎn)信息。最后，判斷獲取的節(jié)點(diǎn)類型是否是 li 元素。

除了鼠標(biāo)事件，我們還可以在觸摸事件中使用該方法獲取觸摸位置下的節(jié)點(diǎn)信息。下面我們用 touchstart 事件舉個(gè)例子，獲取當(dāng)前觸摸所在的元素節(jié)點(diǎn)：

document.addEventListener('touchstart', e => {
const touch = e.touches[0];
const x = touch.clientX;
const y = touch.clientY;
const element = document.elementFromPoint(x, y);
console.log(element);
})

上述代碼中，我們使用 touchstart 事件來獲取觸摸位置信息，并將第一個(gè)觸摸點(diǎn)的 x、y 坐標(biāo)傳遞給 document.elementFromPoint 方法，最后在控制臺(tái)輸出該位置下的節(jié)點(diǎn)信息。

需要注意的是，document.elementFromPoint 方法的返回結(jié)果并不會(huì)一定是最終目標(biāo)元素節(jié)點(diǎn)，而是該坐標(biāo)下的最上層元素節(jié)點(diǎn)。舉個(gè)例子，如果該坐標(biāo)點(diǎn)下面同時(shí)存在多個(gè)元素，那么該方法返回的就是最上層的那個(gè)元素，而不是它所在的父節(jié)點(diǎn)。因此，在實(shí)際使用中需要注意這個(gè)問題，避免出現(xiàn)判斷錯(cuò)誤。

總之，javascript 通過坐標(biāo)獲取節(jié)點(diǎn)信息是一種非常實(shí)用、便捷的技術(shù)，在實(shí)際開發(fā)中特別是涉及鼠標(biāo)或觸摸事件的情況下十分常用。希望讀者在使用的過程中，多多注意方法使用細(xì)節(jié)，避免出現(xiàn)意外情況。