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>