Question

不幸的是我无法想出一个更好的头衔。这是我的问题。我有一张桌子（HTML）。我想要一个解决方案，如果我点击行中的任何位置，它会显示有关叠加层中该行的详细信息。这部分没问题，我可以用jQuery TOOLS做到这一点。但是我在某些列中也有链接，当我点击它们时，我不希望弹出这个叠加层。如果这个问题已经得到解答，我很抱歉，但我无法在任何地方找到它。有任何想法吗？谢谢！

Answer 1

解决方案1：防止链接上的事件冒泡

选择符合您对这些链接的需求的选择器：

$("table tr td a").click(function(evt){
    // will prevent bubbling of click event
    evt.stopPropagation();
})

正如您所看到的，这在事件的源 <链接本身。这将停止单击事件传播到您的表行，因此不会执行详细的overlay / popup。但只有在您未使用live/delegate事件注册时才会有效。

解决方案2：检查事件目标

此解决方案检查表格行的点击事件，无论目标不是链接。保持你的表行选择器（这里只是为了概念证明）：

$("table tr").click(function(evt) { if (evt.target.nodeName.toLowerCase() != "a") { // functionality you're running now } });

这将确保只有在点击了其他任何内容而不是锚A元素时才会显示该弹出窗口。与解决方案1相比，此解决方案在目的地工作。

特别说明

如果您对链接使用live（或delegate）事件注册，则解决方案1根本不起作用。解决方案2是该特定情况下的解决方案。 live/delegate实际上使用DOM树中的一些上部祖先元素（带文档本身的live）来注册事件，该元素检查执行器上的选择器匹配。如果您取消事件冒泡，live事件根本不会触发，因为您需要事件传播/冒泡。

Answer 2

你可以通过生成第n列来解决这个问题，你不会对指定的类有不同的行为：

让我们说这是你的行：

<tr>
  <td>1</td>
  <td>2</td>
  <td class="dont-process-click">3</td>
  <td>4</td>
</tr>

...

只有当点击的td没有该类时，你才能点击事件。

            $("td").click( function() {
                if(! $(this).hasClass('dont-process-click')) {
                    alert('Do something');
                }
            });

Answer 3

在链接列上添加一个类，并在jquery选择器中选择其他列以显示弹出窗口。希望它有所帮助

Answer 4

$(function(){

  $('.row').click(function(event){

    if($(event.target).is('a.special')){  // if it's special, than don't pop-open modal

      return false;

    }

    // Open modal.

  });

});

Answer 5

在jquery中为表td和table td a elements编写两个单击函数。例如： $（文件）。就绪（函数（）{ //用于tr点击 $（'table tr'）。click（function（）{ //生成叠加层 }）;

//用于锚点 $（'table tr td a'）。click（function（）{ //做一点事 }）;
}）;

单击行和行中的链接

5 个答案:

解决方案1：防止链接上的事件冒泡

解决方案2：检查事件目标

特别说明