Ubicar elemento DOM por coordenadas absolutas

¿Hay una manera simple de localizar todos los elementos DOM que "cubren" (es decir, tienen dentro de sus límites) un píxel con un par de coordenadas X/Y?Ubicar elemento DOM por coordenadas absolutas

Fuente

2011-01-24 Dennis Kreminsky

Bueno, puede obtener una respuesta decente de esta pregunta: http://stackoverflow.com/questions/48999/getting-div-id-based-on-x-y-position – Orbling

¿Quiere decir que hay más de un elemento? (¿Quieres que todas las superposiciones se calculen también?) – galambalazs

Mira si esta solución te ayuda http://jsfiddle.net/eyxt2tt1/2/ la secuencia de comandos puede detectar si tus elementos DOM están dentro de un conjunto coordinado. – GibboK

Puede ver document.elementFromPoint aunque no sé qué navegadores lo admiten.
Firefox y Chrome sí. It is also in the MSDN, pero no estoy tan familiarizado con esta documentación, así que no sé en qué versión de IE está incluida.

Actualización:

para encontrar todos los elementos que son de alguna manera en esta posición, se puede hacer la suposición de que también todos los elementos de la matriz están en esta posición. Por supuesto, esto no funciona con elementos posicionados absolutos.

elementFromPoint solo le dará el elemento más frontal. Para encontrar realmente los demás, deberá establecer el display del elemento más frontal en none y luego ejecutar de nuevo la función. Pero el usuario probablemente notaría esto. Tendría que intentarlo.

Fuente

2011-01-24 19:18:04

@Felix Kling Esto suena como un camino por recorrer, verificaré la compatibilidad del navegador. –

@etranger - FF <3.0 no lo tiene seguro. Aparte de eso, no es tan malo: http://www.quirksmode.org/dom/w3c_cssom.html#documentview – galambalazs

@galambalazs: Oh, estaba en la tabla CSS ... Solo he echado un vistazo a la tabla DOM. –

yo no podía dejar de saltar sobre la respuesta de Félix Kling:

var $info = $('<div>', { 
    css: {  
     position: 'fixed', 
     top:   '0px', 
     left:  '0px', 
     opacity:  0.77, 
     width:  '200px', 
     height:  '200px', 
     backgroundColor: '#B4DA55', 
     border:  '2px solid black' 
    } 
}).prependTo(document.body); 

$(window).bind('mousemove', function(e) { 
    var ele = document.elementFromPoint(e.pageX, e.pageY); 
    ele && $info.html('NodeType: ' + ele.nodeType + '<br>nodeName: ' + ele.nodeName + '<br>Content: ' + ele.textContent.slice(0,20)); 
});

actualizado: background-color!

Fuente

2011-01-24 19:41:28 jAndy

Hacer eso en cada 'mousemove' es más o menos * una sobrecarga de CPU *. Sin mencionar que OP nunca ha dicho lo que quiere usar. – galambalazs

@galambalazs: no lo tomes demasiado en serio.Sin embargo, la carga de mi CPU no supera el 20%, pero no dude en poner un balanceador 'clearTimeout' /' setTimeout' alrededor del controlador interno del mousemove;) – jAndy

Esto hace el trabajo (fiddle):

$(document).click(function(e) { 
    var hitElements = getHitElements(e); 
}); 

var getHitElements = function(e) { 
    var x = e.pageX; 
    var y = e.pageY; 
    var hitElements = []; 

    $(':visible').each(function() { 
     var offset = $(this).offset(); 
     if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) { 
      hitElements.push($(this)); 
     } 
    }); 

    return hitElements; 
}

Al utilizar :visible, usted debe ser consciente de esto:

elementos con visibilidad: oculto o la opacidad: 0 se consideran visibles, ya que aún consumen espacio en el diseño. Durante las animaciones que ocultan un elemento, el elemento se considera visible hasta el final de la animación. Durante las animaciones para mostrar un elemento, el elemento es que se considera visible al inicio de la animación.

Por lo tanto, en función de su necesidad, querrá excluir los elementos visibility:hidden y opacity:0.

Fuente

2012-10-22 16:42:15

Ubicar elemento DOM por coordenadas absolutas

Respuesta

Cuestiones relacionadas