Quero uma função que me diga sobre qual elemento o cursor do mouse está.
Assim, por exemplo, se o mouse do usuário estiver sobre esta textarea (com id wmd-input), a chamada window.which_element_is_the_mouse_on()será funcionalmente equivalente a$("#wmd-input")
Respostas:
Existe uma função muito legal chamada document.elementFromPointque faz o que parece.
O que precisamos é encontrar as coordenadas xey do mouse e chamá-lo usando esses valores:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
event.targetou qualquer outra coisa
event.target?
eventé e como veio a ser
Em navegadores mais recentes, você pode fazer o seguinte:
document.querySelectorAll( ":hover" );Isso lhe dará uma NodeList de itens sobre os quais o mouse está atualmente na ordem do documento. O último elemento da NodeList é o mais específico, cada um que o precede deve ser um pai, avô e assim por diante.
<li>pouco sobre os outros <li>elementos.
$(':hover')mas é basicamente a mesma coisa: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemovepode prejudicar o desempenho
Embora o seguinte possa não responder de fato à pergunta, visto que este é o primeiro resultado da pesquisa no Google (o googler pode não fazer exatamente a mesma pergunta :), espero que ele forneça alguma entrada extra.
Na verdade, existem duas abordagens diferentes para obter uma lista de todos os elementos sobre os quais o mouse está atualmente (para navegadores mais recentes, talvez):
Como na resposta do dherman, pode-se ligar
var elements = document.querySelectorAll(':hover');No entanto, isso pressupõe que apenas os filhos irão sobrepor seus ancestrais, o que geralmente é o caso, mas não é verdade em geral, especialmente ao lidar com SVG, onde elementos em diferentes ramos da árvore DOM podem se sobrepor.
Este método usa document.elementFromPoint(x, y)para encontrar o elemento superior, ocultá-lo temporariamente (já que o recuperamos imediatamente no mesmo contexto, o navegador não irá renderizá-lo de fato), então vá para encontrar o segundo elemento superior ... Parece um pouco estranho, mas ele retorna o que você espera quando há, por exemplo, elementos irmãos em uma árvore obstruindo um ao outro. Encontre esta postagem para mais detalhes,
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;
}
Experimente ambos e verifique seus diferentes retornos.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()obtém apenas o primeiro elemento na árvore DOM. Isso NÃO é suficiente para as necessidades dos desenvolvedores. Para obter mais de um elemento, por exemplo, na posição atual do ponteiro do mouse, esta é a função de que você precisa:
document.elementsFromPoint(x, y) . // mind the 's' in elementsIsso retorna uma matriz de todos os objetos de elemento em um determinado ponto. Basta passar os valores X e Y do mouse para esta função.
Mais informações aqui: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
Para navegadores muito antigos que não são suportados, você pode usar esta resposta como alternativa.
Passe o mouse sobre a bolha de eventos, para que você possa colocar um único ouvinte no corpo e esperar que eles borbulhem e, em seguida, pegue o event.targetou event.srcElement:
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
<body onmouseover="doSomething(getTarget(event));">document.elementFromPoint(x, y).
O código a seguir o ajudará a obter o elemento do ponteiro do mouse. Os elementos resultantes serão exibidos no console.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXe em seu e.clientYlugar (testado no Firefox 59).
Você pode olhar para o alvo do mouseoverevento em algum ancestral adequado:
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});<!-- One simple solution to your problem could be like this: -->
<div>
<input type="text" id="fname" onmousemove="javascript: alert(this.id);" />
<!-- OR -->
<input type="text" id="fname" onclick="javascript: alert(this.id);" />
</div>
<!-- Both mousemove over the field & click on the field displays "fname"-->
<!-- Works fantastic in IE, FireFox, Chrome, Opera. -->
<!-- I didn't test it for Safari. -->DEMO: D Mova o mouse na janela de snippet: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ",e.target.tagName);
});
</script>O destino do mousemoveevento DOM é o elemento DOM mais alto sob o cursor quando o mouse se move:
(function(){
//Don't fire multiple times in a row for the same element
var prevTarget=null;
document.addEventListener('mousemove', function(e) {
//This will be the top-most DOM element under cursor
var target=e.target;
if(target!==prevTarget){
console.log(target);
prevTarget=target;
}
});
})();Isso é semelhante à solução de @Philip Walton, mas não requer jQuery ou um setInterval.
Você pode usar este seletor para undermouse objeto e então manipulá-lo como objeto jquery. $(':hover').last();
Deixe-me começar dizendo que não recomendo usar o método que estou prestes a sugerir. É muito melhor usar impulsionado evento de desenvolvimento e se ligam eventos apenas para os elementos que você estiver interessado em saber se o mouse está sobre com mouseover, mouseout, mouseenter, mouseleave, etc.
Se você absolutamente DEVE ter a capacidade de saber qual elemento o mouse está sobre o qual está passando, você precisará escrever uma função que vincule o mouseoverevento a tudo no DOM e, em seguida, armazenar o que quer que o elemento atual esteja em alguma variável.
Você poderia fazer algo assim:
window.which_element_is_the_mouse_on = (function() {
var currentElement;
$("body *").on('mouseover', function(e) {
if(e.target === e.currentTarget) {
currentElement = this;
}
});
return function() {
console.log(currentElement);
}
}());Basicamente, criei uma função imediata que define o evento em todos os elementos e armazena o elemento atual dentro do encerramento para minimizar sua pegada.
Aqui está uma demonstração de trabalho que chama a window.which_element_is_the_mouse_oncada segundo e registra qual elemento o mouse está atualmente sobre o console.
A pergunta antiga, mas aqui está uma solução para aqueles que ainda podem estar lutando. Você deseja adicionar um mouseoverevento ao elemento 'pai' do (s) elemento (s) filho (s) que deseja detectar. O código abaixo mostra como fazer isso.
const wrapper = document.getElementById('wrapper') //parent element
const position = document.getElementById("displaySelection")
wrapper.addEventListener('mousemove', function(e) {
let elementPointed = document.elementFromPoint(e.clientX, e.clientY)
console.log(elementPointed)
});