Question

我有下表：

filteredProviders.AddRange(d2m.FilteredProviders.Split(',')));

$("body").on('click', ".application-checkbox", function (e) {
      alert('checkbox');
      e.stopPropagation();
  });

  $('body').on('click', "tr", function (e) {
      alert('row');
  });

当我单击复选框时，将同时打印出“行”和“复选框”。我在做什么错了？

Answer 1

两个事件处理程序都附加到body元素上。 event.stopPropagation()的文档说：

请注意，这不会阻止相同元素上的其他处理程序运行。

从stopPropagation开始，它不会阻止同一元素上的处理程序被执行，这将阻止进一步传播到其他元素。

如果甚至不再执行同一元素上的所有其他事件处理程序，那么您需要 event.stopImmediatePropagation()：

描述：防止其余处理程序被执行，并防止事件使DOM树冒泡。

$("body").on('click', ".application-checkbox", function(e) {
  alert('checkbox');
  e.stopImmediatePropagation();
});

$('body').on('click', "tr", function(e) {
  alert('row');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="ckbox">
        <input type="checkbox" class="application-checkbox" id="checkbox">
        <label for="checkbox">label</label>
      </div>
    </td>
    <td></td>
  </tr>
</table>

但是这种方法的问题在于，回调是按附加顺序进行调用的，因此，如果tr的回调附加在.application-checkbox的回调之前，则将不起作用。

因此，您需要解决此问题，或者需要将事件侦听器附加到DOM的不同级别：

$("tbody").on('click', ".application-checkbox", function(e) {
  alert('checkbox');
  e.stopPropagation();
});

$('table').on('click', "tr", function(e) {
  alert('row');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <div class="ckbox">
          <input type="checkbox" class="application-checkbox" id="checkbox">
          <label for="checkbox">label</label>
        </div>
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

e.stopPropagation无法在jquery中按预期方式工作

1 个答案: