Question

我正在使用我正在构建的网页遇到一个小麻烦，点击表格单元格中的链接会触发要标记为已点击的行。

但我希望允许点击该特定单元格的其余部分。

您可以通过以下方式查看jsfiddle：https://jsfiddle.net/r00ftuo1/

注意：

通常我的jquery代码会将选定的行保存到数据库中，这样在返回页面时它会恢复所选的行。
通常链接会重定向到其他页面;它会不转到#。

Answer 1

建议将事件处理程序分配给表而不是单独的行或单元格，因为每个事件绑定都计入内存对于少量行而言并不重要，但如果行数百个则真的很重要

$("table").on("click", "td", function(e){
    if($(e.target).is(':not(a)')){
      $(this).closest('tr').toggleClass("selected");
    }
});

Answer 2

这是我的超级懒人解决方案;

). It seems like it does not support nested hashes, like it does in

因此，只有当用户点击了td中的某个位置而不是$("tr").click(function(e) { if (e.target.tagName !== "A") { $(this).toggleClass("selected"); } }元素上时，该类才会切换。

我还简化了您的课程设置以使用切换来保存几行代码。

以下是使用此解决方案https://jsfiddle.net/r00ftuo1/2/

的jsfiddle的更新版本

Answer 3

据我了解，您希望区分锚标记上的click事件和表格单元格上发生的Click事件。

您最好的选择是使用 event.target 并根据您的要求编写一些逻辑。一个快速的代码片段。

$("tr").click(function(event) {
  if (event.target == this) { /** your logic **/ } 
 });

我希望能回答这个问题。进一步阅读。 event.target vs event.currentTarget in jquery

Answer 4

https://jsfiddle.net/r00ftuo1/4/

我认为这就是你要找的东西。此外，如果您需要IE9或更早版本的支持，您还需要执行cancelBubbling以阻止事件冒泡

  $("tr").click(function(evt) {
  if ($(this).hasClass("selected")) {
    $(this).removeClass("selected");
  } else {
    $(this).addClass("selected");
  }
});

$("a").click(function(evt){
    evt.stopPropagation();
    window.location.href = $(this).attr("href");
});

事件冒出来，所以它从DOM层次结构中最深的元素开始，如果你不阻止事件传播，它将冒泡到单元格然后行然后表。所以这里我们需要在链接上使用一个单击处理程序来阻止事件传播，你可以从元素中获取href并使用以下内容进行导航：

window.location.href = $(this).attr("href");

编辑：忘了＆＃34; href＆＃34;

停止表内的链接从标记表行选择

4 个答案: