没有第一个表td的嵌套表td元素的click事件

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()，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;