javascript - 如何防止删除元素时 jQuery 事件冒泡？

Question

根据 jQuery 文档，event.stopPropagation(); 应该停止事件冒泡。在下面的脚本中，当我删除 event.stopPropagation(); 时，该函数将删除 ul 元素代码块，包括它的所有子元素。我添加了 event.stopPropagation(); 来停止冒泡，但它返回以下错误:

TypeError: undefined is not an object (evaluating 'event.stopPropagation')

以下是 HTML 和 jQuery 代码:

$('span.remove').on('click', function() {
  $(this).parent().hide(500, function(event) {
    event.stopPropagation();
    $(this).parent().remove();
  });
});

.todo-list {
  list-style: none;
  padding: 0px;
}
.todo-item {

  border: 2px solid #444;
  margin-top: -2px;
  padding: 10px;
  cursor: pointer;
  display: block;
  background-color: #ffffff;

}
.remove {
  float: right;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  color: #dd0000;
}
.remove:before {
  content: 'X';
}
.remove:hover {
  color: #ffffff;
}
.todo-item::after:hover {
  background-color: #dd0000;
  color: white;
}
.todo-item:hover {
  background-color: #0EB0FF;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='todo-list'>
  <li class='todo-item'>4L 2% Milk
    <span class='remove'></span>
  </li>
  <li class='todo-item'>Butter, Unsalted
    <span class='remove'></span>
  </li>
  <li class='todo-item'>Dozen Eggs
    <span class='remove'></span>
  </li>
  <li class='todo-item'>Walk the dog
    <span class='remove'></span>
  </li>
  <li class='todo-item'>Cut the lawn
    <span class='remove'></span>
  </li>
  <li class='todo-item'>Laundry
    <span class='remove'></span>
  </li>
</ul>

引用文献:

1. How to delete parent element using jQuery?
2. How to stop events bubbling in jQuery?

Answer 1

您必须从 click() 回调中获取您的 event 对象。如果你看jquery hide() api docs ，完整的回调不会传递任何内容，因此您的事件未定义，但是 the click() handler另一方面传递事件对象。所以你只需要将你的 javascript 更改为:

$('span.remove').on('click', function(event) {
  event.stopPropagation();
  $(this).parent().hide(500, function() {
    $(this).parent().remove();
  });
});

然而，整个列表被删除的原因是另一个问题。您两次引用 parent() 来定位要删除的 ul，因此只需删除其中一个父级即可($(this) 的范围更改为隐藏回调)。通过此编辑，代码为:

$('span.remove').on('click', function(event) {
  event.stopPropagation();
  $(this).parent().hide(500, function() {
    $(this).remove();
  });
});

但是，事件的传播确实与整个隐藏的 ul 没有任何关系，因此您只需删除 event.stopPropagation() 行。最终代码为:

$('span.remove').on('click', function() {
  $(this).parent().hide(500, function() {
    $(this).remove();
  });
});