jQuery nos proporciona un amplio conjunto de MouseEvents que se utilizan para proporcionar información sobre los movimientos del puntero del mouse. Por ejemplo, el evento mousedown de jQuery se emite cuando se realiza un clic izquierdo sobre un elemento seleccionado. Para determinar las coordenadas del puntero del mouse sobre un elemento HTML seleccionado, simplemente podemos usar el evento jQuery mousemove . Sin embargo, para determinar las coordenadas del puntero del mouse para un elemento seleccionado que se está desplazando, primero debemos comprender cómo funciona realmente el desplazamiento.
Un objeto de ventana representa una ventana que contiene el DOM . El objeto de documento apunta al DOM que está cargado en el objeto de ventana. Un elemento representa un objeto en el documento .
La ventana gráfica se refiere al área visible de una página web.
La ventana gráfica varía según el dispositivo en el que estamos viendo la página web, como un dispositivo móvil, una tableta o una computadora. La ventana gráfica no es un elemento HTML real, pero se lo conoce como el documento HTML que es visible para el usuario y se ajusta al espacio disponible.
En la ventana gráfica, cada elemento está asociado al cuadro de desplazamiento . Cada elemento dentro del documento que tiene contenido desbordado tiene un cuadro de desplazamiento asociado. Entonces, cada vez que el usuario se desplaza, afecta el cuadro de desplazamiento de elementos y no todo el documento. Incluso la ventana tiene un cuadro de desplazamiento asociado y varía según la ventana gráfica. Entonces, cada vez que desplazamos el documento completo, simplemente cambia lo que podemos ver en la ventana gráfica y no tiene ningún efecto en el documento o el objeto de la ventana en sí.
Cada vez que realizamos un desplazamiento, la ubicación real del puntero del mouse en el objeto del documento permanece sin cambios. Por lo tanto, simplemente puede obtener los cambios relativos en la posición del puntero del mouse dentro del cuadro de desplazamiento del elemento, en relación con su última posición. Este tutorial demostrará cómo obtener las coordenadas relativas actualizadas del mouse en un pergamino usando jQuery.
- Paso 1: Instale Browsersync usando npm . Usaremos Browsersync para iniciar un servidor y proporcionar una URL para ver el sitio HTML y cargar jQuery usando CDN (red de entrega de contenido) como se muestra en el código. Instalaremos Browsersync globalmente.
npm install -g browser-sync
- Paso 2: Cree un archivo index.html en la carpeta raíz de su proyecto.
index.html: agregue el siguiente fragmento de código en ese archivo.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>jQuery Mouse Events</title><scriptsrc=</script></head><body><divid="scoller"style="overflow-y: scroll;height:100px;"><h1>Hello GeeksForGeeks</h1><div>Mouse Coordinates -<spanid="coordinates"></span></div><br><br><div>A Computer Science portal forgeeks. It contains well written,well thought and well explainedcomputer science and programmingarticles, quizzes and ...</div><div>A Computer Science portal forgeeks. It contains well written,well thought and well explainedcomputer science and programmingarticles, quizzes and ...</div></div><scripttype="text/javascript">var xPos = 0;var yPos = 0;var lastScrolled = 0;$(document).ready(function (event) {// Coordinates of the Mouse$(document).mousemove(function (event) {// console.log(event);xPos = event.pageX;yPos = event.pageY;$("#coordinates").text(event.pageX+ ", " + event.pageY+ " ----- " + event.clientX+ ", " + event.clientY);});// New Relative Position of Mouse// on Scroll Functionality$('#scoller').scroll(function (event) {if (lastScrolled != $('#scoller').scrollTop()) {yPos -= lastScrolled;lastScrolled = $('#scoller').scrollTop();yPos += lastScrolled;console.log("New X Pos = " + xPos+ " New Y Pos = " + yPos);}});});</script></body></html> - Paso 4: para iniciar la aplicación mediante Browsersync, ejecute el siguiente comando en el directorio del proyecto.
browser-sync start --server --files "*"
Esto inicia Browsersync en modo servidor y observa todos los archivos dentro del directorio en busca de cambios según lo especificado por el comodín * . La aplicación se iniciará en http://localhost:3000/ de forma predeterminada.
Producción:
Explicación: la propiedad de desbordamiento de CSS se usa para controlar el comportamiento del contenido de un elemento HTML que es demasiado grande para caber en la ventana gráfica. Simplemente podemos recortar el contenido usando overflow: hiddeno agregar una funcionalidad de desplazamiento para ver el contenido de un elemento en la ventana gráfica usando overflow: scrollcomo se muestra en el código.
El método jQuery ready() se usa para esperar a que la página web termine de cargarse antes de ejecutar el resto del código javaScript.
El método jQuery mousemove() se usa para obtener las coordenadas X e Y del puntero del mouse cada vez que se mueve el mouse sobre un elemento seleccionado. Podemos obtener las coordenadas utilizando el objeto de evento global como se muestra en el código.
El evento de desplazamiento de jQuery se emite cuando el usuario se desplaza en el cuadro de desplazamiento del elemento HTML seleccionado. El evento de desplazamiento funciona para todos los elementos que tienen un cuadro de desplazamiento asociado, incluida la propiedad de documento del objeto de ventana. El método scroll() activa el evento de desplazamiento en un elemento HTML seleccionado como se muestra en el código.
El método jQuery scrollTop() se utiliza para devolver la posición de la barra de desplazamiento vertical para el cuadro de desplazamiento de elementos HTML seleccionados. Este método también se puede utilizar para establecer la posición de la barra de desplazamiento vertical. Cuando la barra de desplazamiento está en la parte superior y el usuario no se ha desplazado, la posición es 0 . En el código, este método se usa para calcular la posición relativa del puntero del mouse en un desplazamiento vertical, es decir, cuando el elemento HTML seleccionado solo se desplaza verticalmente (coordenada Y) y la posición horizontal del puntero del mouse (coordenada X) es fijado. En este caso, el elemento HTML seleccionado tiene un desplazamiento horizontal asociado, luego puede usar jQuery scrollLeft()método para calcular la posición relativa del puntero del mouse en el desplazamiento horizontal también. Para tener una mejor comprensión del concepto anterior, consulte la salida.
Publicación traducida automáticamente
Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA