Erstellen eines klickbaren Divs

Update November 2020: Ich denke, die beste mögliche Technik dafür ist Methode 4 in diesem Artikel. Das <div> (oder jedes andere Wrapper-Element) bleibt semantisch und zugänglich, während es über die gesamte Fläche „klickbar“ ist. Es bricht die Textauswahl nicht und respektiert andere „verschachtelte“ interaktive Elemente.

Das <div>-Element ist ein generisches, semantikfreies Element. Wir verwenden es ständig in CSS, weil es uns einen Styling-Haken gibt, ohne andere Bedeutungen zu vermitteln. Es bietet Ihnen alle Arten von fantastischen Positionierungsmöglichkeiten und gibt Ihrer HTML-Struktur Struktur. Sie können natürlich Links in ein <div> einfügen, aber manchmal möchten Sie einfach, dass das gesamte Div als Link klickbar ist. Kein Problem, hier ist, wie es gemacht wird

<div onclick="location.href='YOUR-URL-HERE';" style="cursor: pointer;"></div>

Der Cursor-Stilparameter ändert den Cursor in den Standard-Zeigercursor, wenn ein Besucher mit der Maus über das DIV fährt, was ein schöner visueller Hinweis auf seine Klickbarkeit ist.

Update 12. Mai 2011

Siehe besseres Update oben

Inline-JavaScript ist weitaus weniger cool als 2007 (wenn es das jemals war). Es ist weitaus semantischer und zugänglicher, Funktionalität über Ereignishandler anzuhängen, die wir in separatem JavaScript anwenden. Wenn wir jQuery verwenden, könnten wir so etwas tun

<div>
   <h3>A bunch of</h3>
   <a href="http://google.com">stuff in here</a>
</div>

$(document).delegate("div", "click", function() {
   window.location = $(this).find("a").attr("href");
});