Legyen kattintható az egész div - CSS-trükkök

Anonim

Frissítve 2020 november: Úgy gondolom, hogy a lehető legjobb technika ennek a cikknek a 4. módszere. A (vagy bármi más burkoló elem) szemantikus és hozzáférhető marad, miközben az egész területen „kattintható”. Nem bontja a szövegválasztást, és tiszteletben tartja a többi „beágyazott” interaktív elemet.

Ez tökéletesen érvényes HTML:

 anything 

Ne feledje, hogy linkeket is létrehozhat display: block;, így az egész téglalap alakú terület „kattinthatóvá” válik. De ha rengeteg tartalom van odabent, az abszolút szörnyű az akadálymentesség szempontjából, mivel az összes tartalmat interaktív linkként olvassa el.

Ha feltétlenül használnia kell a JavaScript-et, az egyik módja az, hogy keressen egy linket a div belsejében, és hrefa div-re kattintva nyissa meg azt . Ez a jQuery esetében van:

$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));

Linket keres a div belsejében a „myBox” osztályhoz. Átirányít arra a hivatkozási értékre, amikor a div bármely pontjára kattint.

Hivatkozási HTML:

 blah blah blah. link 

Vagy beállíthat egy data-*attribútumot a következőre :

window.location = $(".myBox").data("location");