TA貢獻1797條經(jīng)驗 獲得超6個贊
有一個很酷的功能document.elementFromPoint，它聽起來像什么。
我們需要找到鼠標的x和y坐標，然后使用這些值調(diào)用它：
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
document.elementFromPoint
TA貢獻1797條經(jīng)驗 獲得超4個贊
在較新的瀏覽器中，您可以執(zhí)行以下操作：
document.querySelectorAll( ":hover" );
這將給您一個NodeList項，以鼠標順序顯示當前鼠標在文檔上的位置。NodeList中的最后一個元素是最具體的，前面的每個元素都應該是父級，祖父母級，依此類推。
TA貢獻1820條經(jīng)驗 獲得超10個贊
盡管以下內(nèi)容可能并未真正回答該問題，希望它會提供一些額外的輸入。
實際上，有兩種方法可以獲取鼠標當前所經(jīng)過的所有元素的列表（也許對于較新的瀏覽器而言）：
“結(jié)構(gòu)”方法-升序DOM樹
就像德曼的回答一樣，
var elements = document.querySelectorAll(':hover');
但是，這假設只有子代會覆蓋其祖先，通常是這種情況，但通常情況并非如此，尤其是在處理SVG時，DOM樹的不同分支中的元素可能會相互重疊。
“視覺”方法-基于“視覺”重疊
此方法用于document.elementFromPoint(x, y)查找最頂層的元素，暫時將其隱藏（由于我們在相同的上下文中立即對其進行了恢復，因此瀏覽器將不會實際呈現(xiàn)該元素），然后繼續(xù)查找第二個最頂層的元素...看起來有些蹺，但是它返回您期望的結(jié)果，例如，樹中的兄弟姐妹元素相互遮擋。請找到此帖子以獲取更多詳細信息，
function allElementsFromPoint(x, y) {
? ? var element, elements = [];
? ? var old_visibility = [];
? ? while (true) {
? ? ? ? element = document.elementFromPoint(x, y);
? ? ? ? if (!element || element === document.documentElement) {
? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? elements.push(element);
? ? ? ? old_visibility.push(element.style.visibility);
? ? ? ? element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
? ? }
? ? for (var k = 0; k < elements.length; k++) {
? ? ? ? elements[k].style.visibility = old_visibility[k];
? ? }
? ? elements.reverse();
? ? return elements;
}
嘗試兩者，并檢查它們的不同收益。
舉報