Home Jquery click event jquery

click event jquery

160
0

Associa un gestore eventi all’evento “click del mouse” o attiva quell’evento su un elemento.
L’evento click viene inviato a un elemento quando il puntatore del mouse si trova sopra l’elemento e il pulsante del mouse viene premuto e rilasciato. Qualsiasi elemento HTML può ricevere questo evento. Consideriamo ad esempio l’HTML:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Il gestore eventi può essere associato a qualsiasi

$( "#target" ).on( "click", function() {
  alert( "Handler for `click` called." );
} );

Ora se clicchiamo su questo elemento, viene visualizzato l’avviso:
Gestore per “clic” chiamato.
Possiamo anche attivare l’evento quando viene cliccato un elemento diverso:

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "click" );
} );

Dopo l’esecuzione di questo codice, anche facendo clic su Trigger il gestore avviserà il messaggio.

L’evento clic viene attivato solo dopo questa esatta serie di eventi:

  • Il pulsante del mouse è premuto mentre il puntatore si trova all’interno dell’elemento.
  • Il pulsante del mouse viene rilasciato mentre il puntatore si trova all’interno dell’elemento.

Questa è solitamente la sequenza desiderata prima di intraprendere un’azione. Se ciò non è richiesto, l’evento mousedown o mouseup potrebbe essere più adatto.
Esempi:

Nascondi i paragrafi in una pagina quando vengono cliccati:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }
  p:hover {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
 
<script>
$( "p" ).on( "click", function() {
  $( this ).slideUp();
} );
</script>
 
</body>
</html>
Previous articleGoogle Web fonts plugin WordPress
Next articleget_post()

LEAVE A REPLY

Please enter your comment!
Please enter your name here