Question

我试图阻止内部复选框事件冒泡到tr元素的点击事件。

我有以下标记：

<table border="1">
  <tr class="row">
    <td>
      Item 1
    </td>
    <td>
      <input type="checkbox" class="cb">
    </td>
  </tr>
  <tr class="row">
    <td>
      Item 2
    </td>
    <td>
      <input type="checkbox" class="cb">
    </td>
  </tr>
</table>

动态添加行，所以为了动态添加元素自动添加侦听器，我使用了以下代码：

$(document).ready(function() {
  $('body').off('click.row').on('click.row', '.row', function() {
    alert(1);
  });
  $('body').off('change.cb').on('change.cb', '.cb', function(e) {
    e.stopPropagation();
    alert(2);
  });
});

然而，事件仍然冒泡到tr元素。我还尝试了以下内容：

e.stopImmediatePropagation();
window.event.cancelBubbles = true;
e.bubbles = false;

似乎没有人工作。

我用JSFiddle重现了这个问题：

JSFiddle

Answer 1

在这种情况下，不会发生事件冒泡，因为您在不同的元素上定义了不同的事件，当鼠标单击复选框时（因为您还单击了一行），这两个事件恰好发生。

您应该根本不添加行单击事件侦听器，或者将stopPropagation移动到另一个处理程序以阻止它被触发。

$(document).ready(function() {
  $('body').off('click.row').on('click.row', '.row', function() {
    e.stopPropagation();
    alert(1);
  });
  $('body').off('change.cb').on('change.cb', '.cb', function(e) {       
    alert(2);
  });
});

停止传播不起作用

1 个答案: