如何使整个<section>元素区域可点击？

Question

我正在处理一个代码库，其中有一份文章列表被渲染在一个链接包装的区块元素中，就像这样：

<a href="link/to/article">
    <section>
        <h2>Article title</h2>
        <img src="path/to/article/img">
        <p>Short description</p>
    </section>
</a>

标签内的内容包括标题、图片和简短描述。所有文章预览都像表格/网格一样呈现。当单击一个“section”时，整篇文章的全部内容将在新页面中呈现。

原因是整个“section”区域应该是可点击的。由于此标记似乎对我来说不太语义化，所以我想知道这段代码是否正确，如果不正确，有没有更好的方法使整个“section”可点击？

- mestevens

Answer 1

你所做的是正确的，很好地发挥了作用。甚至W3C也明确说明：

a元素可以包裹整个段落、列表、表格等，甚至整个章节，只要其中没有交互式内容（例如按钮或其他链接）。

他们还提供了一个和你类似的例子。

- Rob

Answer 2

你可以使用jQuery来实现这个功能......不需要使用链接标签

 

  <section id="clickable_section">
    <h2>article title</h2>
    <img src="article/img">
    <p>Short description</p>
  </section>
<script>
  $(document).ready(function() {
    $("#clickable_section").click(function() {
      //Do something....
    //Continue doing something,like redirecting the user to the new page

    });
  });
</script>

- Fenn-CS

---

虽然使用JavaScript捕获整个部分的点击事件并不是一个坏主意，但它绝不能替代至少一个指向相同目标的锚元素。 - camilokawerin

Answer 3

这样使用锚点的方式相当笨拙。最好做些类似于这样的事情：

HTML：

<section data-link="https://www.google.com">
  <h2>article title</h2>
  <img src="path/to/article/img">
  <p>Short description</p>
</section>

样式表：

section {
  cursor: pointer;
}

JavaScript（jQuery）：

$('section').on('click', function(e){
  e.preventDefault();
  window.location.href=$(this).data('link');
})

- Fhtagn

---

完全不拙劣，并且符合当前的HTML5标准。 - Rob