jquery - 没有第一个表 td 的嵌套表 td 元素的单击事件

Question

如果用户单击 img 元素，则警报会显示 test-image 和 two-side-text。然而我的需要只是显示test-image。我怎样才能做到这一点？

$("body").on('click', 'td', function(evt) {
  alert($(this).attr('class'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="Two-side-text">
        <table>
          <tbody>
            <tr>
              <td class="test-image">
                <img src="img-placeholder.png">
              </td>
            </tr>
          </tbody>
        </table>
        <table>
          <tbody>
            <tr>
              <td class="test-paragraph">
                <p>
                  test paragraph
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您需要停止事件在 DOM 中向上冒泡到父 td 元素。为此，您可以对事件调用 stopPropagation()，如下所示:

$(document).on('click', 'td', function(evt) {
  evt.stopPropagation();
  alert($(this).attr('class'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="Two-side-text">
        <table>
          <tbody>
            <tr>
              <td class="test-image">
                <img src="img-placeholder.png">
              </td>
            </tr>
          </tbody>
        </table>
        <table>
          <tbody>
            <tr>
              <td class="test-paragraph">
                <p>
                  test paragraph
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>