Update november 2020: Ik denk dat de best mogelijke techniek hiervoor Methode 4 in dit artikel is. Het (of wat voor wrapper-element dan ook) blijft semantisch en toegankelijk, terwijl het "klikbaar" is over het hele gebied. Het breekt de tekstselectie niet en respecteert andere "geneste" interactieve elementen.
Dit is volkomen geldige HTML:
anything En vergeet niet dat u links kunt maken display: block;, zodat het hele rechthoekige gebied "klikbaar" wordt. Maar als er een hoop inhoud in zit, is het absoluut verschrikkelijk voor de toegankelijkheid, al die inhoud wordt gelezen als de interactieve link.
Als je absoluut JavaScript moet gebruiken, is een manier om een link in de div te vinden en daar naartoe te gaan hrefwanneer op de div wordt geklikt. Dit is met jQuery:
$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));Zoekt naar een link in div met de klasse "myBox". Leidt om naar die linkwaarde wanneer ergens in div wordt geklikt.
Referentie-HTML:
blah blah blah. link Of u kunt een data-*attribuut instellen op de en het volgende doen:
window.location = $(".myBox").data("location");