dom - Bestäm vilket element muspekaren är ovanpå i JavaScript

Jag vill ha en funktion som talar om för mig vilket element muspekaren är över.

Så, till exempel, om användarens mus är över denna textruta (med id wmd-input), kommer att anropa window.which_element_is_the_mouse_on() att vara funktionellt ekvivalent med $ ("#wmd-input").

Svar #1

DEMO

Det finns en riktigt cool funktion som heter document.elementFromPoint som gör precis vad den låter som.

Det vi behöver göra är att hitta x- och y-koordinaterna för musen och sedan anropa det med de värdena:

document.addEventListener('mousemove', e => {
  console.clear()
  console.log( document.elementFromPoint(e.clientX, e.clientY) )
}, {passive: true})
[class^='level']{
  width: 100px;
  height: 100px;
  padding: 15px;
  background: #00000033;
}
<div class='level-1'>
  <div class='level-2'>
    <div class='level-3'>
      Hover
    </div>
  </div>
</div>

document.elementFromPoint

jQuery-händelseobjekt

Svar #2

I nyare webbläsare kan du göra följande:

document.querySelectorAll( ":hover" );

Det kommer att ge dig en NodeList med objekt som musen för närvarande befinner sig över i dokumentordning. Det sista elementet i NodeList är det mest specifika, varje föregående bör vara en förälder, farförälder och så vidare.

Svar #3

Även om följande kanske inte faktiskt besvarar frågan, eftersom detta är det första resultatet vid googling (googlaren kanske inte ställer exakt samma fråga:), hoppas jag att det kan ge lite extra information.

Det finns faktiskt två olika tillvägagångssätt för att få en lista över alla element som musen för närvarande är över (för nyare webbläsare, kanske):

Den "strukturella" metoden - Uppåtgående DOM-träd

Som i dhermans svar, kan man kalla

var elements = document.querySelectorAll(':hover');

Men detta förutsätter att endast barn kommer att överlagra sina förfäder, vilket vanligtvis är fallet, men inte sant i allmänhet, särskilt när man hanterar SVG där element i olika grenar av DOM-trädet kan överlappa varandra.

Den "visuella" metoden - Baserad på "visuell" överlappning

Denna metod använder document.elementFromPoint(x, y) för att hitta det översta elementet, dölja det tillfälligt (eftersom vi återhämtar det omedelbart i samma kontext, kommer webbläsaren faktiskt inte att rendera detta), och sedan fortsätta för att hitta det näst översta elementet... Ser lite hackigt ut, men det returnerar det du förväntar dig när det finns till exempel syskonelement i ett träd som skymmer varandra. Vänligen se detta inlägg för mer information,

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;
}

Test båda och kontrollera deras olika avkastningar.

Svar #4

elementFromPoint() hämtar endast det första elementet i DOM-trädet. Detta räcker mestadels inte för utvecklares behov. För att få mer än ett element vid t.ex. den nuvarande muspekaren-positionen, är detta funktionen du behöver:

document.elementsFromPoint(x, y) . // Mind the 's' in elements

Detta returnerar en array med alla elementobjekt under den angivna punkten. Skicka bara musens X- och Y-värden till denna funktion.

Mer information finns här: DocumentOrShadowRoot.elementsFromPoint()

För mycket gamla webbläsare som inte stöds, kan du använda detta svar som en reservlösning.

Svar #5

Följande kod kommer att hjälpa dig att få elementet för muspekaren. De resulterande elementen kommer att visas i konsolen.

document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})

Relaterade artiklar