Question

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

TypeError：undefined不是对象（评估 '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>

参考文献：

Answer 1

您必须从event回调中获取click()个对象。如果查看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();
  });
});

Answer 2

将事件obj移动到委派的点击事件。

而不是this使用event.target。

＆＃13;

$('span.remove').on('click', function(event) {
  var tgt = event.target;
  $(tgt).parent().hide(500, function() {
    $(tgt).parent().remove();
     
  });
 
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

多个问题：

未传递event变量。不要在event函数中包含hide()参数，而是在on()事件处理程序中。这应该可以阻止错误。
您要删除父级的父级。将$(this).parent().remove();替换为$(this).remove();
您实际上不需要stopPropagation() 。解决上述两个问题后，您不需要它。 click事件未传播。

如何在删除元素时阻止jQuery事件冒泡？

3 个答案: