为什么在div上触发点击事件答案

【问题标题】：Why is click event triggered on div为什么在div上触发点击事件
【发布时间】：2016-04-12 20:12:52
【问题描述】：

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

<div class="d1" style="background-color: red; position: fixed; top: 0; bottom: 0; right; 0; left: 0; right: 0;">
    <div class="d2" style="width: 200px; height: 100px; background-color: green; position: relative; top: 100px; left: 100px;"></div>
</div>

$(function() {
  $('.d1').on('click', function(event) {
    alert('clicked on red');
  });

  $('.d2').on('click', function(event) {
    alert('clicked on green');
  });
});

second setup

<div class="d1" style="width: 200px; height: 100px; background-color: red; position: relative; top: 100px; left: 100px;">
</div>
    <div class="d2" style="width: 200px; height: 100px; background-color: green; position: relative; top: 100px; left: 100px;"></div>

$(function() {
  $('.d1').on('click', function(event) {
    alert('clicked on red');
  });

  $('.d2').on('click', function(event) {
    alert('clicked on green');
  });
});

在这两种情况下，我都单击绿色 div，并且在不释放鼠标按钮的情况下移动指针以悬停在红色 div 上，然后释放按钮。在第一个设置中，为红色 div 触发了 click 事件，而在第二个设置中，它没有被触发。

为什么不一样？

【问题讨论】：

@Paulie_D，是的，但是如果为启动事件的元素触发警报，它也应该在第二种情况下发生，对吧？
@Paulie_D，是的！安静不明显！谢谢队友:)
一旦发布并接受答案，请不要更改问题。问一个新问题。

标签： javascript html css

【解决方案1】：

因为click 是mousedown 和mouseup 事件集的简写。

JQuery

点击事件仅在这一系列事件之后触发：

当指针位于元素。

当指针位于元素。

如果两个条件都不满足，则函数不会触发。

所以

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

只有红色函数会触发，因为 mousedown 发生在绿色 div 红色 div 内，因此红色 div 也被点击，mouseup 发生在红色 div 上。

所以mousedown 和mouseup 只发生在红色 div 上。

【讨论】：

谢谢，你能看看我的编辑，尤其是这条评论this is how I can do to ensure that click is triggered 吗？当鼠标按下对话框并在对话框外释放鼠标时，我需要防止隐藏模式对话框 - 这是modal window的示例。
您需要为此提出第二个新问题，以免使已发布的任何内容无效。我已回滚编辑，因此您可以提出新问题。
完成了，请看here

【解决方案2】：

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

一般来说，你不会发现这个问题，因为当点击事件已经绑定到子元素时，你没有任何点击事件绑定到父元素，就像 setup(2) 的情况一样。

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

【讨论】：

OP 没有点击绿色！
抱歉，没找到你

【解决方案3】：

在您的第一步中，它的工作原理与提到的其他答案一样，绿色 div 在红色 div 内。因此，如果您单击绿色 div，则触发绿色 div 的单击事件。同时由于 JS 的漂亮特性 Event Bubbling 将相同的点击事件传递给它的父级，即红色 div。

因此，当您单击绿色 div 时，鼠标按下事件会同时触发绿色 div 和红色 div。并且当您将鼠标移动到红色 div 并释放它时，红色 div 会触发单击事件，但绿色 div 不会触发。因为要进行单击事件，您需要先按下鼠标再抬起鼠标。但在你的情况下，鼠标没有为绿色 div 触发。

在您的第二个设置中，两个 div 彼此相邻，而不是一个内一个。所以附加到两个 div 的事件是单独的。

所有其他答案都是正确的，我只是解释一下理论：D

【讨论】：

【解决方案4】：

如果你需要解决这个问题，你可以这样做

$(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");
  });
});

JSFiddle

不确定是否是这种情况，但只是提出来。

【讨论】：