Question

我有两个带有两个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事件，而第二次设置则不触发事件。

为什么会有差异？

Answer 1

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

JQuery

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



指针在指针内时按下鼠标按钮   元件。



当指针位于内部时，鼠标按钮被释放   元件。

如果两个条件都不满足，则该功能不会触发。

所以

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

只有红色功能触发，因为mousedown发生在红色div内的绿色div 上，因此红色div也被点击，mouseup发生在红色的div。

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

Answer 2

在上面的设置（1）中，绿色的是绿色的孩子。因此，当您单击绿色时，它会自动点击父项，因此即使点击红色div也是如此。

通常，您不会发现此问题，因为当click事件已经绑定到子元素时没有任何绑定到父级的click事件，就像setup（2）一样。

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

Answer 3

在你的第一步为什么它的工作原理与其他提到的答案一样，绿色div在红色div中。因此，如果您单击绿色div单击事件以激活绿色div。同时由于JS漂亮的功能事件冒泡相同的点击事件传递给它的红色div的父母。

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

在你的第二次设置中，两个div彼此相邻而不是另一个。因此附加到两个div的事件都是个人的。

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

Answer 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

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

为什么在div上触发click事件

4 个答案: