Začátkem tohoto týdne jsem zveřejnil tip na použitelnost týkající se použití vlastních událostí CSS a MooTools k automatickému přidání kurzoru „ukazatele“, když je k prvku připojena událost „kliknutí“. Obdržel jsem mnoho žádostí o verzi jQuery a myslím, že jsem přišel na to, jak tuto funkci replikovat.
Zobrazit ukázkuSelhání JavaScriptu jQuery
/* create custom event */ jQuery.event.special.click = { setup: function() { $(this).css('cursor','pointer'); }, teardown: function(namespaces) { $(this).css('cursor',''); } }; /* usage; nothing different than usual*/ $(document).ready(function() { $('#click-me').click(function() { var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $(this).css('background',col); }); });
Objekt speciální události používám k přidání vlastní události s názvem click. Po přidání události způsob nastavení změní kurzor prvku na ukazatel. Pokud bychom tuto událost odstranili, kurzor ukazatele by byl odstraněn. Problém s výše uvedeným kódem je v tom, že se zdá, že přepisuje výchozí událost kliknutí, a když na prvek skutečně kliknete, nic se nestane. Sakra!
Úspěch JavaScriptu jQuery
/* listen for hover/click */ $(document).ready(function() { /* attempt fix */ $('*').each(function() { $(this).mouseover(function() { if(jQuery.data(this,'events').click) { $(this).css('cursor','pointer'); } }); }); /* usage? */ $('#click-me').click(function() { var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $('#click-me').css('background',col); }); });
Jediný způsob, jak bych to mohl přimět, aby to fungovalo bez úpravy jádra jQuery, je umístit událost mouseenter na každý prvek v DOM, který zkontroloval, zda je pro daný prvek přítomna událost kliknutí. Pokud ano, ukažte kurzor. Toto je ošklivá metoda k dosažení cíle, ale jediná, kterou jsem našel. Pokud by měl být prvek přidán do DOM dynamicky, výše uvedené by nefungovalo.
AKTUALIZACE:Řešení jQuery JavaScript
jQuery.event.special.click = { setup: function() { $(this).css('cursor','pointer'); return false; }, teardown: fuction() { $(this).css('cursor',''); return false; } };
Brandon Aaron a Scott Kyle nám požehnali řešením; vypadá to, že jsem byl velmi blízko. Přidání return false; by to udělal.
Zobrazit ukázkuDěkuji Brandonovi a Scottovi, že mi pomohli!