将子元素悬停在 HTML 5 中时如何触发拖动离开？

当一个 div 被设置为可拖动并且我们将鼠标悬停在一个执行 dragenter 和 dragleave 命令的 div 上时，当该 div 中存在一个执行 dragleave 命令的子级时，我们会遇到一个问题，如下所示。

示例 1：此处当鼠标悬停在子颜色上时消失。

HTML

  
    
    
    
    
    
  
  
    .yellow {
      background-color: yellow;
    }
  
  
    Drag me
    
  
    
      Drop here
  
      Child Element
    
    
      $("#drop").bind({
        dragenter: function () {
          $(this).addClass("yellow");
        },
  
        dragleave: function () {
          $(this).removeClass("yellow");
        },
      });
  
      $("#drag").bind({
        dragstart: function (e) {
          e.allowedEffect = "copy";
          e.setData("text/plain", "test");
        },
      });
    
  

输出：我们可以看到，当鼠标悬停在子元素上时，dragleave函数执行，因此颜色消失。

示例 2：为了解决这个问题，我们使用了一个计数器，该计数器仅在计数器变为零时才执行 dragleave函数。这里当鼠标悬停在子颜色上时不会消失

Javascript

  
    
    
    
    
    
  
  
  
    .yellow {
      background-color: yellow;
    }
  
  
    Drag me
    
  
    
      Drop here
  
      Child Elements
    
    
      var counter = 0;
  
      $("#drop").bind({
        dragenter: function (ev) {
          ev.preventDefault();
          counter++;
          $(this).addClass("yellow");
        },
  
        dragleave: function () {
          counter--;
          if (counter === 0) {
            $(this).removeClass("yellow");
          }
        },
      });
  
      $("#drag").bind({
        dragstart: function (e) {
          e.allowedEffect = "copy";
          e.setData("text/plain", "test");
        },
      });
    
  

输出：