使整个 Div 可点击

2020年11月更新：我认为本文中的方法 4 是实现此目的的最佳方法。<div>（或任何包装元素）保持语义和可访问性，同时在整个区域内“可点击”。它不会破坏文本选择，并尊重其他“嵌套”的交互式元素。

这完全有效的 HTML

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

并且请记住，您可以使链接display: block;，这样整个矩形区域都变成“可点击”。但是，如果其中包含大量内容，对于可访问性来说绝对是糟糕的，因为所有这些内容都被读取为交互式链接。

如果您绝对需要使用 JavaScript，一种方法是在 div 中查找链接，并在点击 div 时转到其href。这是使用 jQuery 的方法

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

查找类名为“myBox”的 div 内部的链接。在点击 div 中的任何位置时重定向到该链接的值。

参考 HTML

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

或者，您可以在<div data-location="http://place.com">上设置data-*属性，并执行以下操作

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