Uppdatering november 2020: Jag tror att den bästa möjliga tekniken för detta är metod 4 i den här artikeln. Den (eller vad wrapper element) förblir semantiska och tillgänglig, samtidigt som ”klickbara” över hela området. Det bryter inte textval och respekterar andra "kapslade" interaktiva element.
Detta är helt giltig HTML:
anything Och kom ihåg att du kan skapa länkar display: block;så att hela det rektangulära området blir "klickbart". Men om det finns massor av innehåll där inne, är det helt hemskt för tillgänglighet, läser allt det innehållet som den interaktiva länken.
Om du absolut behöver använda JavaScript är ett sätt att hitta en länk inuti div och gå till dess hrefnär div klickas. Detta är med jQuery:
$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));Letar efter en länk inuti div med klass "myBox". Omdirigerar till det länkarvärdet när någonstans i div klickas.
Referens HTML:
blah blah blah. link Eller så kan du ställa in ett data-*attribut på och göra som:
window.location = $(".myBox").data("location");