jQuery ci permette di creare degli eventi personalizzati (custom) con la stessa semplicità con la quale si creano selettori personalizzati. In questo articolo vedremo come creare un evento per gestire un triplo click del mouse.
Il pattern per la creazione del nostro evento è il seguente:
$.event.special.tripleclick = {
setup: function(data, namespaces) {
var elem = this,
$elem = jQuery(elem);
$elem.bind('click', jQuery.event.special.tripleclick.handler);
},
teardown: function(namespaces) {
var elem = this,
$elem = jQuery(elem);
$elem.unbind('click', jQuery.event.special.tripleclick.handler)
},
handler: function(event) {
var elem = this,
$elem = jQuery(elem),
clicks = $elem.data('clicks') || 0;
clicks += 1;
if (clicks === 3) {
clicks = 0;
event.type = "tripleclick";
jQuery.event.handle.apply(this, arguments)
}
$elem.data('clicks', clicks);
}
};
L'unica difficoltà è quella di legare una variabile di tipo data all'oggetto jQuery e usarla come contatore interno. Ecco un esempio del suo uso:
$('#test').bind('tripleclick', function() {
alert('3');
});
Potete visionare l'esempio finale in questa pagina.