替代嵌套锚标签答案

【问题标题】：Alternative to nested anchor tags替代嵌套锚标签
【发布时间】：2011-07-10 00:27:39
【问题描述】：

我正在尝试构建一个表格，其中每个单元格的内容都用一个设置为全高和全宽的A 标签包装，以便整个单元格都可以点击。

但有些单元格的内容需要有额外的链接。

马上跳出来的解决办法是嵌套A标签，像这样：

<td>
   <a href="#" class="cell" >
      Officers include:
      President, Vice president, Secretary, Treasurer,
      <a href="#">7 others</a>
   </a>
</td>

但是嵌套的A 标签是非法的。是否有任何解决方法可以让我达到预期的效果？

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 CSS 或 JavaScript。我建议只使用 CSS。

CSS

This works in my Firefox 仅使用 CSS。基本上我只是让所有子链接（除了大链接）都有position: relative 并将它们的z-index 设置为高于大背景链接。

HTML

<div>
    Hello, <a href="http://example.com/hello" class="normal">Bob</a>
    <a href="http://example.com" class="big"></a>
</div>

CSS

div {
    position: relative;
}

.big {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;   
  z-index: 0;
}

.normal {
  position: relative;
  z-index: 1;  
}

JavaScript

将点击事件附加到单元格，并将事件附加到所有子链接。确保子链接事件不会冒泡 (stopPropagation())。

【讨论】：

我认为这种方法不允许使用 TAB 进行键盘聚焦。
CSS 解决方案非常漂亮。我将尝试在 TD 上使用 TABINDEX 属性的 JS 解决方案，也许这样可以使其集中。
@Will 如果 CSS 解决方案适用于您需要的所有浏览器，请使用它。我总是尝试在不依赖 JavaScript 的情况下让 CSS 做它可以做的事情:)
不幸的是，这会使 div 内的文本无法选择:(
使用 JavaScript 试试这个 JSfiddle 示例。 CSS 版本不会阻止点击向上冒泡，这可能还可以，但不如 JS 恕我直言：jsfiddle.net/10uwsLkw/1

【解决方案2】：

为什么不直接这样定义：

<td>
    <a href="#" class="cell" >
       Officers include:
       President, Vice president, Secretary, Treasurer,
    </a>
    <a href="#">7 others</a>
</td>

如果整个单元格是可点击的，肯定会否定单元格包含的任何链接？

【讨论】：

这解决了这个 Q 中的用例，但它不是通用的，即如果你希望总统有一个不同的 <a> 标签怎么办。为了减少写入重复的<a> 标签，阻止 DOM 事件冒泡更优雅。看到这个 JSfiddle：jsfiddle.net/10uwsLkw/1

【解决方案3】：

你可能想要...

<td>
   <a href="#" class="cell" >
      Officers include:
      President, Vice president, Secretary, Treasurer,
   </a>
   <a href="#">7 others</a>
</td>

【讨论】：