Come utilizzare la proprietà screenx mouseevent in javascript

Come utilizzare la proprietà screenx mouseevent in javascript

La proprietà screenx mouseevent valuta il cursore del mouse (x) coordinate orizzontale nel punto innescato. Restituisce la distanza effettiva del cursore del mouse corrispondente allo schermo come valore intero in "Pixel". Inoltre, è una proprietà di sola lettura, io.e., L'utente può ottenere solo la coordinata orizzontale del mouse, non assegnarlo manualmente. Le coordinate orizzontali svolgono un ruolo importante nella progettazione del web per l'allineamento di varie sezioni della pagina web.

Considerando la sua importanza, questo articolo fornirà una visione approfondita dell'uso e della funzionalità del "Mouseevent Screenx"Proprietà in JavaScript.

Come utilizzare la proprietà "MouseEvent ScreenX" in JavaScript?

IL "Mouseevent Screenx"La proprietà aiuta gli utenti a ottenere le coordinate orizzontali del puntatore del mouse in cui questo evento viene attivato.

Sintassi

evento.screenx

Nella sintassi sopra:

  • evento: Rappresenta qualsiasi evento come "OnClick "," DblClick "," Mouseover", e molti altri.
  • screenx: Corrisponde al “Mouseevent Screenx"Proprietà che restituirà la coordinata del mouse orizzontale.

Passiamo alla sua pratica implementazione.

Esempio: applicazione della proprietà "MouseEvent ScreenX" in JavaScript

In questo esempio, la proprietà discussa può essere utilizzata per calcolare le coordinate orizzontali del puntatore del topo facendo riferimento al paragrafo.

Codice HTML

Panoramiamo il seguente codice HTML:

Utilizzare la proprietà MOUSEEVT SCHERMEX



Fare clic in qualsiasi punto del paragrafo per visualizzare le coordinate X (orizzontale) del puntatore del mouse nei pixel.


Nel codice HTML sopra:

  • IL "

    "Crea la prima intestazione.

  • IL "

    "Rappresenta il primo paragrafo con un allegato"al clic"Evento. Reindirizza alla funzione denominata "mouse_xcoord ()"Che restituisce la coordinata orizzontale rispetto alla posizione del puntatore del mouse nel paragrafo.

  • Dopodiché, il "

    "Indica il secondo paragrafo vuoto assegnato un ID"Primo"Per visualizzare la coordinata del puntatore del mouse orizzontale calcolato.

Codice JavaScript

Ora, passiamo al codice JavaScript:

Nelle righe di codice sopra:

  • Definire una funzione chiamata "mouse_xcoord ()"Avere una discussione"evento".
  • Nella definizione della funzione, la variabile "UN"È dichiarato che utilizza il"screenx" proprietà.
  • IL "coords"È un'altra variabile che restituisce il valore di"UN"
  • IL "documento.getElementById ()"Il metodo prenderà il paragrafo tramite il suo ID e aggiunge le coordinate calcolate in questo paragrafo.

Produzione

L'output visualizza il “Coords x (orizzontale)"Del puntatore del topo in cui"screenx"Trigger di proprietà.

Conclusione

JavaScript fornisce il “Mouseevent Screenx"Proprietà che restituisce l'ultimo puntatore del mouse"X (orizzontale)"Coordinare dove viene attivato questo evento. Può essere ottenuto in bilico con il puntatore in orizzontale e i corrispondenti valori di coordinate X vengono recuperati. Questo post ha spiegato l'uso e la funzionalità del "Mouseevent Screenx"Proprietà in JavaScript.