Question

我想整个表格行可点击，包括空格。我已经看到了使用JavaScript和TR上的点击处理程序的方法，或者只是将每个TD作为显示：block。

皱纹是我还希望在连接其他地方的行中有一些文本，但不会触发整个行的其余部分的底层链接。从本质上讲，这个特殊的文字就像一个“徽章”。

这样的事情：

T = Text
B = Badge
W = Whitespace

该行中的单个单元格可能如下所示：

TTTTT BB WWWWWWWWWWWWWWWWWWW

单击T和W将转到一个链接，这是通常的情况。但是点击B将在新窗口中打开一个不同的链接，并且不会在主窗口中打开原始链接。

寻找正确方向的指针，是否可以在纯HTML / CSS或JavaScript等中完成。谢谢，

Answer 1

您可以使用A元素进行导航，然后如果该行从中获取单击，则忽略它。

<tr onclick="doSomething(event);">
  <td>
    <a href="…">TTTTT</a><a href="…">BB</a>WWWWWWWWW…


function doSomething(evt) {
  var tgt = evt.target || evt.srcElement;
  if (tgt && tgt.tagName.toLowerCase() == 'a' && tgt.href) {
    // don't do click action
    return;
  } 
  // do click action
}

哦，不要让TR 显示：阻止，因为它们应该是显示：table-cell 。

Answer 2

在IE媒体资源中查看活动的target FF / Chrome / Safari或srcElement。即使您正在收听TR上的事件，您也应该看到event.target作为实际点击的内容。然后，您可以查看元素（或其父元素）以确定要采取的操作。更多详情：https://developer.mozilla.org/en/DOM/event.target

表行单击 - 两个目标

2 个答案: