Cómo usar la propiedad MouseEvent Screensx en JavaScript

Cómo usar la propiedad MouseEvent Screensx en JavaScript

La propiedad de Screensx mouseEvent evalúa la coordenada horizontal del cursor del mouse (x) en el punto activado. Devuelve la distancia real del cursor del mouse correspondiente a la pantalla como un valor entero en "píxeles". Además, es una propiedad de solo lectura, yo.mi., El usuario solo puede obtener la coordenada horizontal del mouse, no asignarlo manualmente. La coordenada horizontal juega un papel importante en el diseño web para la alineación de varias secciones de las páginas web.

Teniendo en cuenta su importancia, este artículo proporcionará una visión profunda del uso y la funcionalidad del "Mouseevent scancex"Propiedad en JavaScript.

Cómo usar la propiedad "MouseEvent Screates" en JavaScript?

El "Mouseevent scancex"La propiedad ayuda a los usuarios a obtener las coordenadas horizontales del puntero del mouse donde se activa este evento.

Sintaxis

evento.guarda

En la sintaxis anterior:

  • evento: Representa cualquier evento como "onClick "," dblclick "," mouseover", y muchos otros.
  • guarda: Corresponde al "Mouseevent scancex"Propiedad que devolverá la coordenada del mouse horizontal.

Pasemos a su implementación práctica.

Ejemplo: Aplicar la propiedad "MouseEvent Screenx" en JavaScript

En este ejemplo, la propiedad discutida se puede utilizar para calcular las coordenadas horizontales del puntero del mouse referiéndose al párrafo.

código HTML

Vamos a ver el siguiente código HTML:

Utilice la propiedad MouseEvent Screensx



Haga clic en cualquier punto del párrafo para mostrar las coordenadas X (horizontal) del puntero del mouse en píxeles.


En el código HTML anterior:

  • El "

    "Crea el primer encabezado.

  • El "

    "Representa el primer párrafo que tiene un adjunto"al hacer clic" evento. Redirige a la función llamada "mouse_xcoord ()Que devuelve la coordenada horizontal con respecto a la ubicación del puntero del mouse en el párrafo.

  • Después de eso, el "

    "Denota el segundo párrafo vacío asignado una identificación"primero"Para mostrar la coordenada de puntero del mouse horizontal calculada.

Código JavaScript

Ahora, pasemos al código JavaScript:

En las líneas de código anteriores:

  • Defina una función llamada "mouse_xcoord ()" teniendo una discusión "evento".
  • En la definición de función, la variable "a"Se declara que utiliza el"guarda" propiedad.
  • El "coords"Es otra variable que devuelve el valor de"a"
  • El "documento.getElementById ()El método "obtiene el párrafo a través de su ID y agrega las coordenadas calculadas en este párrafo.

Producción

La salida muestra el "X (horizontal) Coords"Del puntero del mouse donde el"guarda"Properts desencadenantes.

Conclusión

JavaScript proporciona el "Mouseevent scancex"Propiedad que devuelve el último puntero del mouse"X (horizontal)"Coordinar donde se activa este evento. Se puede lograr flotando el puntero horizontalmente y los valores de coordenadas X correspondientes se recuperan. Esta publicación explicó el uso y la funcionalidad del "Mouseevent scancex"Propiedad en JavaScript.