Question

这是我到目前为止，得到的行号工作得很好，但我需要这样做，以便当我点击表中的链接时，它不会触发函数内的代码。

<table>
  <tr class="row">
    <td>A</td>
    <td><a class="link" href="foo.html">Foo</a></td>
  </tr>
  <tr class="row">
    <td>B</td>
    <td><a class="link" href="Bar.html">Bar</a></td>
  </tr>
</table>


<script>
$(function(){
    $('.row:not(.link)').click(function(){
        var $row = $(this).index();
    });
});
</script>

Answer 1

选择器.row：not（。link）将选择所有具有“row”类且没有“link”类的元素，这不是您要查找的内容。

您需要在a.link元素的click事件中使用event.stopPropagation，以便click事件不会传播到包含row的父项。

试试这个：

<table>
    <tr class="row">
        <td>A</td>
        <td><a class="link" href="foo.html">Foo</a></td>
    </tr>
    <tr class="row">
        <td>B</td>
        <td><a class="link" href="Bar.html">Bar</a></td>
    </tr>
</table>

<script> 
    $(function(){     
        $('.row').click(function(){         
            var $row = $(this).index();     
        }); 
        $('.row .link').click(function(e){
            e.stopPropagation(); 
        });
    }); 
</script>

Answer 2

在jquery中快速修复，只需使用instanceof

  $("#news-table tr").click(function(e){
      if((e.srcElement instanceof HTMLAnchorElement)!=true  )console.log("IIIIIIHA HA!");
  });

Answer 3

您需要在链接的点击事件中阻止event propagation - 这是一个示例：http://jsfiddle.net/6t8u7/1/

如您所见，点击链接只会触发一个事件。单击该行将触发另一个事件。

您获取当前行为的原因是链接中的click事件“冒泡”到父元素。

Answer 4

使用数据属性，不需要课程：

$(document).on('click', '[data-href]', function(e) {
    if($(e.target).hasClass('ignore'))
        return;
    var ignore = ['input', 'a', 'button', 'textarea', 'label'];
    var clicked = e.target.nodeName.toLowerCase();
    if($.inArray(clicked, ignore) > -1)
        return;
    window.location = $(this).data('href');
});

用法示例（tr只是一个示例 - 您可以使用div等）：

<tr data-href="your_url">
    <td class="ignore">Go nowhere</td>
    <td>Go to your_url</td>
    <td><a href="another_url">Go to another_url</a></td>
    <td><input type="text" value="Go nowhere"></td>
</tr>

Answer 5

您也可以在不明确选择第二个函数中的行的情况下使用它。

$(function(){     
    $('.row').click(function(){         
        var $row = $(this).index();     
    }); 
    $('.link').click(function(event){
       event.preventDefault();
       event.stopPropagation();
    });
});

Answer 6

也可以使用（特别是如果您将href与span或href中的其他嵌套项目一起使用）：

    $(".row").click(function(e) {
        var hasHref = $(e.target).closest('td').find('a').length;

        if (! hasHref) {
            window.document.location = $(this).data("href");
        }
    });

jQuery表行单击一个链接时单击事件也会触发

6 个答案: