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>
