Javascript 为什么div上会触发单击事件

我有两个带有两个div的jsfiddler设置：

$（函数（）{
$（'.d1'）。在（'click'，函数（事件）{
警报（“点击红色”）；
});
$（'.d2'）。在（'click'，函数（事件）{
警报（“单击绿色”）；
});
});

$（函数（）{
$（'.d1'）。在（'click'，函数（事件）{
警报（“点击红色”）；
});
$（'.d2'）。在（'click'，函数（事件）{
警报（“单击绿色”）；
});
});

在这两种情况下，我都单击绿色div，在不释放鼠标按钮的情况下，将指针移动到悬停在红色div上，然后释放按钮。在第一次设置中，红色div会触发

单击

事件，而在第二次设置中不会触发

为什么会有差异？

在上面的设置（1）中，绿色的作为红色的子对象。因此，当您单击绿色时，它会自动单击父级，因此即使是红色div也会被单击

通常，您不会发现此问题，因为在安装（2）的情况下，当单击事件已绑定到子元素时，您没有将任何单击事件绑定到父元素

单击父元素不会触发单击子元素，除非鼠标位于子元素的定义域中，或者换句话说，如果有人单击子元素本身。

在上述设置（1）中，您将绿色元素作为红色元素的子元素。因此，当您单击绿色时，它会自动单击父级，因此即使是红色div也会被单击

通常，您不会发现此问题，因为在安装（2）的情况下，当单击事件已绑定到子元素时，您没有将任何单击事件绑定到父元素

---

单击父元素不会触发单击子元素，除非鼠标位于子元素的定义域中，或者换句话说，如果有人正在单击子元素本身。

，因为

单击是
鼠标向下
和
鼠标向下
事件集的简写


单击事件仅在以下一系列事件之后触发：


当指针位于鼠标内时，按下鼠标按钮
元素

鼠标按钮在指针位于内部时释放
元素


如果两个条件都不满足，则功能不会启动

所以

单击绿色div，在不释放鼠标按钮的情况下，我将指针移动到悬停在红色div上，然后释放按钮

只有红色函数才会触发，因为
mousedown
发生在红色div内部的绿色div上，因此也会单击红色div，而
mouseup
发生在红色div上

所以
mousedown
和
mouseup
只发生在红色分区上。
因为
点击
是
mousedown
和
mouseup
事件集的简写


单击事件仅在以下一系列事件之后触发：


当指针位于鼠标内时，按下鼠标按钮
元素

鼠标按钮在指针位于内部时释放
元素


如果两个条件都不满足，则功能不会启动

所以

单击绿色div，在不释放鼠标按钮的情况下，我将指针移动到悬停在红色div上，然后释放按钮

只有红色函数才会触发，因为
mousedown
发生在红色div内部的绿色div上，因此也会单击红色div，而
mouseup
发生在红色div上

所以
mousedown
和
mouseup
只发生在红色div上。
在您的第一步中，它工作的原因与其他答案一样，绿色div位于红色div内。因此，如果您单击绿色div，请单击绿色div触发的事件。由于JS Beauty feature事件冒泡，同一时间相同的点击事件传递给它的父项，即红色div

因此，当您单击绿色div时，鼠标按下事件将同时触发绿色div和红色div。当您将鼠标移动到红色div并释放它时，红色div将触发单击事件，而绿色div则不会。因为要进行单击事件，您需要先按住鼠标，然后再向上按住鼠标。但在你的情况下，鼠标向上并没有向绿色分区开火

在第二种设置中，两个div彼此相邻，而不是一个在另一个内部。因此，附加到两个div的事件都是单独的

所有其他答案都是正确的，我只是解释一下原理：D
在您的第一步中，它为什么会起作用，正如其他答案所提到的，绿色div位于红色div内。因此，如果您单击绿色div，请单击绿色div的事件。由于JS Beauty feature事件冒泡，同一时间相同的点击事件传递给它的父项，即红色div

因此，当您单击绿色div时，鼠标按下事件将同时触发绿色div和红色div。当您将鼠标移动到红色div并释放它时，红色div将触发单击事件，而绿色div则不会。因为要进行单击事件，您需要先按住鼠标，然后再向上按住鼠标。但在你的情况下，鼠标向上并没有向绿色分区开火

在第二种设置中，两个div彼此相邻，而不是一个在另一个内部。因此，附加到两个div的事件都是单独的

所有其他答案都是正确的，我只是解释一下理论：如果你需要通过这个问题，你可以做如下的事情

$(document).on("mousedown", function(e){
  var tar = $(e.target).attr('class');
  $(document).on("mouseup",function(){
    if (tar == "d1"){
      alert("clicked on red");
    }
    if(tar == "d2"){
      alert("clicked on green");
    }
  $(document).off("mouseup");
  });
});


不确定是否是这种情况，但只是提出这个问题。
如果您需要通过此问题，您可以执行以下操作

$(document).on("mousedown", function(e){
  var tar = $(e.target).attr('class');
  $(document).on("mouseup",function(){
    if (tar == "d1"){
      alert("clicked on red");
    }
    if(tar == "d2"){
      alert("clicked on green");
    }
  $(document).off("mouseup");
  });
});


不确定是否是这种情况，但只是提出这个问题。
@Paulie\u D，是的，但如果对事件发生的元素触发警报，它也应该在第二种情况下发生，对吗？@Paulie\u D，是的！不是很明显！谢谢，伙计：）答案发布后，请不要更改问题
$(document).on("mousedown", function(e){
  var tar = $(e.target).attr('class');
  $(document).on("mouseup",function(){
    if (tar == "d1"){
      alert("clicked on red");
    }
    if(tar == "d2"){
      alert("clicked on green");
    }
  $(document).off("mouseup");
  });
});