表行单击 - 两个目标

Table Row Click - Two Destinations

本文关键字：两个 目标 单击      更新时间：2023-09-26

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

问题是我还想在行中有一些文本链接到其他地方，但不触发整个行其余部分的基础链接。 从本质上讲，这种特殊文本就像一个"徽章"。

像这样：

T = Text
B = Badge
W = Whitespace

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

TTTTT BB WWWWWWWWWWWWWWWWWWW

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

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

您可以使用 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 显示：块，因为它们应该是显示：表格单元格。

看看该活动的target FF/Chrome/Safari，或者 IE 属性中的srcElement。 即使您正在收听 TR 上的事件，您也应该看到实际点击的事物event.target。 然后，您可以查看元素（或其父元素）以确定要执行的操作。 更多详细信息： https://developer.mozilla.org/en/DOM/event.target

相关文章：