Ganzen Div anklickbar machen

Update November 2020: Ich denke, die beste mögliche Technik dafür ist Methode 4 in diesem Artikel. Die <div> (oder welches Wrapper-Element auch immer) bleibt semantisch und barrierefrei, während sie über die gesamte Fläche "klickbar" ist. Sie bricht die Textauswahl nicht und respektiert andere "verschachtelte" interaktive Elemente.

Das ist vollkommen gültiges HTML

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

Und denken Sie daran, dass Sie Links display: block; machen können, sodass der gesamte rechteckige Bereich "klickbar" wird. Aber wenn darin eine Menge Inhalt steckt, ist das absolut schrecklich für die Barrierefreiheit, da der gesamte Inhalt als interaktiver Link gelesen wird.

Wenn Sie unbedingt JavaScript verwenden müssen, können Sie einen Link innerhalb des Divs finden und zu seinem href gehen, wenn das Div angeklickt wird. Dies geschieht mit jQuery

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

Sucht nach einem Link in einem Div mit der Klasse "myBox". Leitet zum Wert dieses Links um, wenn irgendwo im Div geklickt wird.

Referenz-HTML

<div class="myBox">
  blah blah blah.
  <a href="http://google.com">link</a>
</div>

Oder Sie könnten ein data-* Attribut auf dem <div data-location="http://place.com"> setzen und so etwas tun:

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