Lehe virnastatud elementidega t\u00f6\u00f6tamine, millest m\u00f5ned on ankrud ja teised, mis on s\u00fcndmuste k\u00e4itlejatega, v\u00f5ivad m\u00f5nikord p\u00f5hjustada veidrat k\u00e4itumist.<\/p>\n
L\u00f5ppkokkuv\u00f5ttes on see k\u00f5ik seotud s\u00fcndmuste levitamisega, kuid kui te pole sellega (v\u00f5i s\u00fcndmuste mullitamise v\u00f5i muu sellisega) tegelema pidanud, v\u00f5ib see olla v\u00e4ike v\u00e4ljakutse.<\/p>\n
Ja siin on n\u00e4ide: mis siis, kui teil on ankrusse m\u00e4hitud pilt. Mis juhtub, kui sisestate p\u00e4rast lehe laadimist JavaScripti kaudu d\u00fcnaamilise elemendi, mis laadib teise d\u00fcnaamilise elemendi? Peale selle, kas soovite peatada lehe \u00fcmbersuunamise, kui d\u00fcnaamilisel elemendil kl\u00f5psatakse, kuid siiski suunamise, kui pildil kl\u00f5psate?<\/p>\n
See v\u00f5ib tunduda lihtne \u2013 ja m\u00f5nel juhul on see nii \u2013, kuid kui teil on l\u00e4bipaistev element, mis katab kogu algse pildi, v\u00f5ib see muutuda hoopis teiseks v\u00e4ljakutseks.<\/p>\n
Siin tuleb m\u00e4ngu s\u00fcndmuste sihtm\u00e4rkide m\u00f5istmine. Kuid enne, kui hakkan seda lahendama, proovin k\u00f5ik lihtsamaks selgituseks destilleerida ja joonistada diagrammi, kuidas see DOM-is renderdatakse.<\/p>\n
Nii et proovige seda ette kujutada: teil on\u2026<\/p>\n
Selle raske osa on see, et d\u00fcnaamilised elemendid asetatakse olemasoleva ankru ja pildi kombinatsiooni peale.<\/p>\n
See t\u00e4hendab, et DOM n\u00e4eks v\u00e4lja umbes selline:<\/p>\n
M\u00e4rkus \u00fclaloleval pildil k\u00e4ivitab ankur<\/strong> pildi<\/strong> ja d\u00fcnaamiline element<\/strong> k\u00e4ivitab d\u00fcnaamilise \u00fclekatte<\/strong>.<\/p>\n Kuidas siis kuvada teist d\u00fcnaamilist elementi, kui esimene kl\u00f5psas, ilma lehelt lahkumata? Seda saate teha k\u00e4ivitatud s\u00fcndmuse sihtm\u00e4rki uurides.<\/p>\n Kasutan allpool jQueryt, kuna enamik minu lugejaid t\u00f6\u00f6tab WordPressiga ja WordPress tarnib jQueryga, kuid seda saab k\u00e4sitleda ka vanilje JavaScriptiga (kuid sellel teel on rohkem kui ma olen n\u00f5us selles konkreetses selgitama postitus).<\/p>\n Seda \u00f6eldes selgitan siin koodiga toimuvat sisu:<\/a><\/strong><\/p>\n Esiteks, ma eeldan, et d\u00fcnaamilisi elemente on mitu, seega iga<\/a> iteraatori p\u00f5hjus.<\/p>\nS\u00fcndmuste k\u00e4sitlemise kood<\/h3>\n
$('.acme-element').each(function(e) { \n var $anchor = $(this).parents('a');\n $(this).on('click', function(evt) {\n if(e.target !== this) {\n evt.preventDefault();\n }\n \/\/ Here, you may want to action to redirect to an original anchor.\n });\n});<\/code><\/pre>\n