Javascript 令人费解的点击事件：为什么会有这样的行为？

我最近测试了一个

的点击事件（点击后发现一个文本框），发现了一些不寻常的东西

在HTML标记中

• 如果
  位于
  内，则该按钮上的单击事件 标签发射了两次
• 如果
  在
  之外，则单击事件为 按预期运行

为了更好地理解我想提出的内容，请参阅

我对此感到困惑，也不明白背后的原因。有人要吗

如果

位于

内，则该标签上的单击事件将触发两次

因为事件在DOM中“冒泡”，从接收初始事件的元素（

event.target

，这里是

）到祖先。由于侦听器附加到

的父对象，因此它首先在其子对象上检测到的单击时激发，然后在单击气泡自身时再次激发

要防止出现这种情况，可以使用

event.stopPropagation（）

来防止冒泡

由于在本例中，

事件

在触发

警报（）

/event处理程序时已冒泡到

元素，因此必须在

本身上显式调用

事件.stopPropagation（）

，而不是在

附加的事件处理程序中：

$（函数（）{
$（“标签输入”）。单击（函数（事件）{
event.stopPropagation（）；
});
$（“.v1 li标签”）。单击（函数（）{
var ct=$（this.find（“input”）.val（）；
警报（ct）；
});
$（“.v2 li标签”）。单击（函数（）{
var ct=$（this.parent（）.find（“input”）.val（）；
警报（ct）；
});
});
ul{
填充：10px；
}
李{
列表样式：无；
边缘底部：5px；
}
li标签{
显示：块；
背景色：#f0；
填充物：5px；
光标：指针；
边框：1px实心#ccc；
}
li输入{
显示：无；
}
}

输入内部标签


弗斯特


第二


第三



输入外部标签


第四


第五


第六

在您的情况下，单击事件从标签传播到输入，然后再传播到标签，因此您可以找到两个警报

当我们可以检查目标元素标记名时，您可以使用下面的代码，如果它是
INPUT
，则返回，否则将进一步处理

$(".v1 li label").click(function(event){
    if(event.target.tagName=='INPUT')
      return false;
   var ct= $(this).find("input").val();     
   alert("first "+ct);      
});

查看事件冒泡/传播。你能分享你的代码吗？我的第一个猜测是您的选择器匹配了这两个元素。@TrueBlueAussie包装
标签中的
输入
s经常被使用，并且非常有效：-）@PeeHaa:非常正确。哦，天哪……这是有道理的。我没有意识到。将在时间限制过期时标记为答案。谢谢