javascript - posicion - ¿Cómo obtener la posición del mouse sin eventos(sin mover el mouse)?

obtener posicion del raton javascript

Question

¿Es posible obtener la posición del mouse con JavaScript después de cargar la página sin ningún evento de movimiento del mouse (sin moverlo)?

Answer 1

Como nadie ofreció una solución que se puede usar a medias, aquí está la mía. Exporta las propiedades window.currentMouseX y window.currentMouseY que puede utilizar en cualquier lugar. Utiliza la posición de un elemento suspendido (si existe) inicialmente y luego escucha los movimientos del mouse para establecer los valores correctos.

(function () {
    window.currentMouseX = 0;
    window.currentMouseY = 0;

    // Guess the initial mouse position approximately if possible:
    var hoveredElement = document.querySelectorAll('':hover'');
    hoveredElement = hoveredElement[hoveredElement.length - 1]; // Get the most specific hovered element

    if (hoveredElement != null) {
        var rect = hoveredElement.getBoundingClientRect();
        // Set the values from hovered element''s position
        window.currentMouseX = window.scrollX + rect.x;
        window.currentMouseY = window.scrollY + rect.y;
    }

    // Listen for mouse movements to set the correct values
    document.addEventListener(''mousemove'', function (e) {
        window.currentMouseX = e.pageX;
        window.currentMouseY = e.pageY;
    });
}())

Fuente del CMS de Composr : https://github.com/ocproducts/composr/commit/a851c19f925be20bc16bfe016be42924989f262e#diff-b162dc9c35a97618a96748639ff41251R1202

Answer 2

Imagino que tal vez tengas una página principal con un temporizador y después de que se complete una cierta cantidad de tiempo o una tarea, envías al usuario a una nueva página. Ahora desea la posición del cursor y, como están esperando, no necesariamente están tocando el mouse. Entonces, rastree el mouse en la página principal usando eventos estándar y pase el último valor a la nueva página en una variable de obtención o publicación.

Puede usar el código de JHarding en su página principal para que la última posición esté siempre disponible en una variable global:

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}

Esto no ayudará a los usuarios que navegan a esta página por otros medios que no sean su página principal.

Answer 3

Implementé una búsqueda horizontal / vertical, (primero haga un div lleno de enlaces de líneas verticales dispuestos horizontalmente, luego haga un div lleno de enlaces de líneas horizontales dispuestos verticalmente, y simplemente vea cuál tiene el estado de desplazamiento) como la idea de Tim Down arriba, y funciona bastante rapido Lamentablemente, no funciona en Chrome 32 en KDE.

jsfiddle.net/5XzeE/4/

Answer 4

La respuesta de @Tim Down no es eficaz si renderiza 2,000 x 2,000 elementos de <a> :

OK, acabo de pensar en una manera. Superponga su página con un div que cubre todo el documento. Dentro de eso, cree (digamos) 2,000 x 2,000 elementos (para que la pseudo-clase: hover funcione en IE 6, vea), cada uno de 1 píxel de tamaño. Cree una regla CSS: hover para aquellos elementos que cambian una propiedad (digamos font-family). En su manejador de carga, recorra cada uno de los 4 millones de elementos, verificando currentStyle / getComputedStyle () hasta que encuentre el que tiene la fuente flotante. Extrapolar de nuevo este elemento para obtener las coordenadas dentro del documento.

NB NO HAGAS ESTO.

Pero no tiene que generar 4 millones de elementos a la vez, en su lugar, utilice la búsqueda binaria. Solo usa 4 elementos <a> lugar:

• Paso 1: Considere toda la pantalla como el área de búsqueda inicial
• Paso 2: divida el área de búsqueda en 2 x 2 = 4 elementos del rectángulo <a>
• Paso 3: Usar la función getComputedStyle() determina en qué rectángulo está el mouse.
• Paso 4: Reduzca el área de búsqueda a ese rectángulo y repita desde el paso 2.

De esta manera, tendría que repetir estos pasos un máximo de 11 veces, teniendo en cuenta que su pantalla no es más ancha que 2048px.

Por lo tanto, generará un máximo de 11 x 4 = 44 elementos <a> .

Si no necesita determinar la posición del mouse exactamente a un píxel, diga que la precisión de 10px está bien. Repetiría los pasos como máximo 8 veces, por lo que tendría que dibujar un máximo de 8 x 4 = 32 elementos <a> .

Además, generar y luego destruir los elementos <a> no se realiza ya que DOM es generalmente lento. En su lugar, solo puede reutilizar los 4 elementos iniciales <a> y simplemente ajustar su top , left , width y height medida que recorre los pasos.

Ahora, crear 4 <a> es una exageración. En su lugar, puede reutilizar el mismo elemento <a> para cuando compruebe getComputedStyle() en cada rectángulo. Entonces, en lugar de dividir el área de búsqueda en elementos 2 x 2 <a> , simplemente reutilice un solo elemento <a> moviéndolo con top propiedades de estilo top e left .

Por lo tanto, todo lo que necesita es un único elemento <a> que cambie su width y height máximo 11 veces, que cambie top y left máximo a la left 44 veces y tendrá la posición exacta del mouse.

Answer 5

La solución más simple pero no 100% precisa.

$('':hover'').last().offset()

Resultado: {top: 148, left: 62.5}
El resultado depende del tamaño del elemento más cercano y se devuelve undefined cuando el usuario cambia la pestaña

Answer 6

Lo que puede hacer es crear variables para las coordenadas x e y de su cursor, actualizarlas cada vez que se mueva el mouse y llamar a una función en un intervalo para hacer lo que necesita con la posición almacenada.

La desventaja de esto, por supuesto, es que se requiere al menos un movimiento inicial del mouse para que funcione. Siempre que el cursor actualice su posición al menos una vez, podemos encontrar su posición independientemente de si se mueve nuevamente.

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval(checkCursor, 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

El código anterior se actualiza una vez por segundo con un mensaje donde se encuentra el cursor. Espero que esto ayude.

Answer 7

No es necesario mover el mouse para obtener la ubicación del cursor. La ubicación también se informa sobre eventos distintos de mousemove . Aquí hay un evento de clic como ejemplo:

document.body.addEventListener(''click'',function(e)
{
    console.log("cursor-location: " + e.clientX + '','' + e.clientY);
});

Answer 8

Puedes probar algo similar a lo que Tim Down sugirió, pero en lugar de tener elementos para cada píxel en la pantalla, crea solo 2-4 elementos (cajas) y cambia su ubicación, ancho, altura de forma dinámica para dividir las ubicaciones posibles en la pantalla. por 2-4 recursivamente, encontrando así la ubicación real del mouse rápidamente.

Por ejemplo, los primeros elementos toman la mitad derecha e izquierda de la pantalla, luego la mitad superior e inferior. Por ahora ya sabemos en qué parte de la pantalla está ubicado el mouse, podemos repetirlo: descubra qué parte de este espacio ...

Answer 9

Respuesta real: No, no es posible.

OK, acabo de pensar en una manera. Superponga su página con un div que cubre todo el documento. Dentro de eso, cree (diga) 2,000 x 2,000 <a> elementos (para que la pseudo-clase :hover funcione en IE 6, vea), cada uno de 1 píxel de tamaño. Cree una regla CSS :hover para esos elementos <a> que cambian una propiedad (digamos font-family ). En su manejador de carga, currentStyle cada uno de los 4 millones de elementos <a> , currentStyle / getComputedStyle() hasta que encuentre el que tiene la fuente flotante. Extrapolar de nuevo este elemento para obtener las coordenadas dentro del documento.

NB NO HAGAS ESTO .

Answer 10

Riffing en la respuesta de @SupNoNova, aquí hay un enfoque que utiliza clases de ES6 que mantiene el contexto correcto en su devolución de llamada:

class Mouse {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.callbacks = {
      mouseenter: [],
      mousemove: [],
    };
  }

  get xPos() {
    return this.x;
  }

  get yPos() {
    return this.y;
  }

  get position() {
    return `${this.x},${this.y}`;
  }

  addListener(type, callback) {
    document.addEventListener(type, this); // Pass `this` as the second arg to keep the context correct
    this.callbacks[type].push(callback);
  }

  // `handleEvent` is part of the browser''s `EventListener` API.
  // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent
  handleEvent(event) {
    const isMousemove = event.type === ''mousemove'';
    const isMouseenter = event.type === ''mouseenter'';

    if (isMousemove || isMouseenter) {
      this.x = event.pageX;
      this.y = event.pageY;
    }

    this.callbacks[event.type].forEach((callback) => {
      callback();
    });
  }
}

const mouse = new Mouse();

mouse.addListener(''mouseenter'', () => console.log(''mouseenter'', mouse.position));
mouse.addListener(''mousemove'', () => console.log(''mousemove A'', mouse.position));
mouse.addListener(''mousemove'', () => console.log(''mousemove B'', mouse.position));

Answer 11

También puede enganchar el mouseenter (este evento se activa después de la recarga de la página, cuando el cursor del ratón está dentro de la página). Extender el código de Corrupted debería hacer el truco:

var x = null;
var y = null;
    
document.addEventListener(''mousemove'', onMouseUpdate, false);
document.addEventListener(''mouseenter'', onMouseUpdate, false);
    
function onMouseUpdate(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x, y);
}

function getMouseX() {
  return x;
}

function getMouseY() {
  return y;
}

También puede establecer x e y en nulo en el evento mouseleave-event. Así que puedes verificar si el usuario está en tu página con su cursor.

Answer 12

var x = 0;
var y = 0;

document.addEventListener(''mousemove'', onMouseMove, false)

function onMouseMove(e){
    x = e.clientX;
    y = e.clientY;
}

function getMouseX() {
    return x;
}

function getMouseY() {
    return y;
}