jquery - 如何检测哪个被点击

Question

我有以下情况:我有一个 和 。我需要检测哪个被点击(最终得到Id)。我已经构建了以下 JS Fiddle作为引用。

jQuery(document).ready(function() { 
    $(".table").find("tr").click( function(){
        alert("<tr> clicked");
        var td2 = $(this).find(".td2:first").text();
        alert(td2);
    });
});

我有一个 .click() 事件，单击时我正在执行一些操作，但我需要检测是否有特定的 <td>单击以排除该 TD。基本上，当单击任何一个时，应该执行一些操作(除非单击特定的<td>，在这种情况下不应该执行任何操作)

你觉得怎么样？

Answer 1

如果您想排除 td2 中的点击，那么在点击处理程序中您可以使用 event.target 来获取被点击的实际元素。

jQuery(document).ready(function() {
  $(".table tr").click(function(e) {
    if ($(e.target).closest('td').is(':nth-child(2)')) {
      snippet.log('td2 clicked');
      return;
    }
    snippet.log("<tr> clicked");
    var td2 = $(this).find("td:nth-child(2)").text();
    snippet.log('td2: ' + td2)
  });
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td class="td1"></td>
    <td class="td2">A</td>
    <td class="td3">B</td>
    <td class="td4">C</td>
    <td class="td5">D</td>
  </tr>
  <tr>
    <td>1</td>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td>D2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>A3</td>
    <td>B3</td>
    <td>C3</td>
    <td>D3</td>
  </tr>
</table>