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

根据jQuery文档，

event.stopPropagation（）应停止事件冒泡。在下面的脚本中，当我删除
event.stopPropagation（）时该函数删除
ul
元素代码块，包括其所有子元素。我添加了
event.stopPropagation（）
停止冒泡，但返回以下错误：

TypeError:undefined不是对象（正在评估）
'event.stopPropagation'）

以下是HTML和jQuery代码：


$（'span.remove'）。在（'click'，function（）上{
$（this）.parent（）.hide（500，函数（事件）{
event.stopPropagation（）；
$（this.parent（）.remove（）；
});
});
.todo列表{
列表样式：无；
填充：0px；
}
.待办事项{
边框：2px实心#444；
页边顶部：-2px；
填充：10px；
光标：指针；
显示：块；
背景色：#ffffff；
}
.移除{
浮动：对；
字体系列：Helvetica、Arial、无衬线字体；
字号：0.8em；
颜色：#dd0000；
}
.删除：之前{
内容：“X”；
}
。移除：悬停{
颜色：#ffffff；
}
.todo项：：之后：悬停{
背景色：#dd0000；
颜色：白色；
}
.todo项目：悬停{
背景色：#0EB0FF；
颜色：白色；
}


4升2%牛奶

黄油，无盐

打鸡蛋

遛狗

修剪草坪

洗衣房

您必须从
click（）
回调中获取
事件
对象。如果查看，完整回调不会传递任何内容，因此事件是未定义的，但另一方面会传递事件对象。因此，您只需将javascript更改为：

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

然而，删除整个列表的原因是另一个问题。您以要删除的ul为目标引用了两次
parent（）
，因此只需删除其中一个父级（
$（this）
在隐藏回调中更改父级）。通过此编辑，代码为：

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

但是，事件的传播确实与
ul
作为一个整体被隐藏没有任何关系，因此您可以删除
事件.stopPropagation（）
行。最终代码为：

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

您必须从
click（）
回调中获取
事件
对象。如果查看，完整回调不会传递任何内容，因此事件是未定义的，但另一方面会传递事件对象。因此，您只需将javascript更改为：

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

然而，删除整个列表的原因是另一个问题。您以要删除的ul为目标引用了两次
parent（）
，因此只需删除其中一个父级（
$（this）
在隐藏回调中更改父级）。通过此编辑，代码为：

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

但是，事件的传播确实与
ul
作为一个整体被隐藏没有任何关系，因此您可以删除
事件.stopPropagation（）
行。最终代码为：

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

将事件对象移动到委派的单击事件

使用
event.target来代替
此


$（'span.remove'）。在（'click'，函数（事件）{
var tgt=event.target；
$（tgt）.parent（）.hide（500，函数（）{
$（tgt）.parent（）.remove（）；
});
});
.todo列表{
列表样式：无；
填充：0px；
}
.待办事项{
边框：2px实心#444；
页边顶部：-2px；
填充：10px；
光标：指针；
显示：块；
背景色：#ffffff；
}
.移除{
浮动：对；
字体系列：Helvetica、Arial、无衬线字体；
字号：0.8em；
颜色：#dd0000；
}
.删除：之前{
内容：“X”；
}
。移除：悬停{
颜色：#ffffff；
}
.todo项：：之后：悬停{
背景色：#dd0000；
颜色：白色；
}
.todo项目：悬停{
背景色：#0EB0FF；
颜色：白色；
}


4升2%牛奶

黄油，无盐

打鸡蛋

遛狗

修剪草坪

洗衣房

将事件obj移动到委托点击事件

使用
event.target来代替
此


$（'span.remove'）。在（'click'，函数（事件）{
var tgt=event.target；
$（tgt）.parent（）.hide（500，函数（）{
$（tgt）.parent（）.remove（）；
});
});
.todo列表{
列表样式：无；
填充：0px；
}
.待办事项{
边框：2px实心#444；
页边顶部：-2px；
填充：10px；
光标：指针；
显示：块；
背景色：#ffffff；
}
.移除{
浮动：对；
字体系列：Helvetica、Arial、无衬线字体；
字号：0.8em；
颜色：#dd0000；
}
.删除：之前{
内容：“X”；
}
。移除：悬停{
颜色：#ffffff；
}
.todo项：：之后：悬停{
背景色：#dd0000；
颜色：白色；
}
.todo项目：悬停{
背景色：#0EB0FF；
颜色：白色；
}


4升2%牛奶

黄油，无盐

打鸡蛋

遛狗

修剪草坪

洗衣房

多个问题：

未传递
事件
变量。不要在
hide（）
函数中包含
event
参数，而是在
on（）
事件处理程序中。这将停止错误
您正在删除父项的父项。替换以下行：
$（this）.parent（）.remove