在Firefox中拖动到窗口外时如何检测dragleave事件

问题描述 投票：0回答：6

当拖动到窗口之外时，Firefox 无法正确触发 Dragleave 事件：

https://bugzilla.mozilla.org/show_bug.cgi?id=665704

https://bugzilla.mozilla.org/show_bug.cgi?id=656164

我正在尝试为此开发一种解决方法（我知道这是可能的，因为 Gmail 正在这样做），但我唯一能想到的似乎真的很黑客。

了解何时在窗口外拖动的一种方法是等待 

dragover
事件停止触发（因为 
dragover
在拖放操作期间不断触发）。我是这样做的：

var timeout;

function dragleaveFunctionality() {
  // do stuff
}

function firefoxTimeoutHack() {
  clearTimeout(timeout);
  timeout = setTimeout(dragleaveFunctionality, 200);
}

$(document).on('dragover', firefoxTimeoutHack);

这段代码本质上是一遍又一遍地创建和清除超时。除非 

dragover
事件停止触发，否则不会达到 200 毫秒超时。

虽然这有效，但我不喜欢为此目的使用超时的想法。感觉不对。这也意味着在“dropzone”样式消失之前会有轻微的滞后。

我的另一个想法是检测鼠标何时离开窗口，但通常的做法在拖放操作期间似乎不起作用。

有人有更好的方法吗？

更新：

这是我正在使用的代码：

 $(function() {
          var counter = 0;
          $(document).on('dragenter', function(e) {
            counter += 1;
            console.log(counter, e.target);
          });
          $(document).on('dragleave', function(e) {
            counter -= 1;
            console.log(counter, e.target);
          });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Open up the console and look at what number is reporting when dragging files in and out of the window. The number should always be 0 when leaving the window, but in Firefox it's not.</p>

javascript jquery html drag-and-drop
6个回答
58
投票

我找到了解决办法。问题不在于 

dragleave
事件没有触发；而是在于。相反，当第一次将文件拖到窗口中时（有时在拖动某些元素时）， 
dragenter
事件会触发两次。我最初的解决方案是使用计数器来跟踪最终 
dragleave
事件发生的时间，但是 
dragenter
事件的双重触发扰乱了计数。 （为什么我不能只听你问的 
dragleave
？嗯，因为 
dragleave
的功能与 
mouseout
非常相似，因为它不仅在离开元素时触发，而且在进入子元素时触发。因此，当 
 dragleave
触发，您的鼠标很可能仍在原始元素的范围内。）

我想出的解决方案是跟踪哪些元素 

dragenter
和 
dragleave
已被触发。由于事件会传播到文档，因此侦听特定元素上的 
dragenter
和 
dragleave
不仅会捕获该元素上的事件，还会捕获其子元素上的事件。

因此，我创建了一个 jQuery 集合 

$()
来跟踪哪些元素触发了哪些事件。每当 Dragenter 被触发时，我都会将 
event.target
添加到集合中，并且每当 Dragleave 发生时，我都会从集合中删除 
event.target
。这个想法是，如果集合为空，则意味着我实际上已经离开了原始元素，因为如果我输入一个子元素，则至少有一个元素（子元素）仍将位于 jQuery 集合中。最后，当触发 
drop
事件时，我想将集合重置为空，以便在下一个 
dragenter
事件发生时准备就绪。

jQuery 还节省了大量额外工作，因为它会自动进行重复检查，因此 

event.target
不会被添加两次，即使 Firefox 错误地双重调用 
dragenter
。

唷，无论如何，这是我最终使用的代码的基本版本。如果其他人有兴趣使用它，我已将其放入一个简单的 jQuery 插件中。基本上，您可以在任何元素上调用 

.draghover
，并且 
draghoverstart
会在第一次拖入元素时触发，而 
draghoverend
会在拖动实际离开元素时触发。

// The plugin code
$.fn.draghover = function(options) {
  return this.each(function() {

    var collection = $(),
        self = $(this);

    self.on('dragenter', function(e) {
      if (collection.length === 0) {
        self.trigger('draghoverstart');
      }
      collection = collection.add(e.target);
    });

    self.on('dragleave drop', function(e) {
      collection = collection.not(e.target);
      if (collection.length === 0) {
        self.trigger('draghoverend');
      }
    });
  });
};

// Now that we have a plugin, we can listen for the new events 
$(window).draghover().on({
  'draghoverstart': function() {
    console.log('A file has been dragged into the window.');
  },
  'draghoverend': function() {
    console.log('A file has been dragged out of window.');
  }
});

没有 jQuery

要在没有 jQuery 的情况下处理这个问题，你可以这样做：

// I want to handle drag leaving on the document
let count = 0
onDragEnter = (event) => {
  if (event.currentTarget === document) {
    count += 1
  }
}

onDragLeave = (event) => {
  if (event.currentTarget === document) {
     count += 0
  }

  if (count === 0) {
    // Handle drag leave.
  }
}
3
投票

根据您希望实现的目标，您可以使用仅在 Firefox 中可用的 

:-moz-drag-over
伪类来解决此问题，它可以让您对拖动到元素上的文件做出反应。

看看这个简单的演示 http://codepen.io/ryanseddon/pen/Ccsua

.dragover {
    background: red;
    width: 500px;
    height: 300px;
}
.dragover:-moz-drag-over {
    background: green;
}
0
投票

受@PhilipWalton代码的启发，我简化了jQuery插件代码。

$.fn.draghover = function(fnIn, fnOut) {
    return this.each(function() {
        var n = 0;
        $(this).on('dragenter', function(e) {
            (++n, n==1) && fnIn && fnIn.call(this, e);
        }).on('dragleave drop', function(e) {
            (--n, n==0) && fnOut && fnOut.call(this, e);
        });
    });
};

现在你可以使用jquery插件了，比如jquery的hover方法：

// Testing code 1
$(window).draghover(function() {
    console.log('into window');
}, function() {
    console.log('out of window');
});

// Testing code 2
$('#d1').draghover(function() {
    console.log('into #d1');
}, function() {
    console.log('out of #d1');
});
0
投票

唯一对我有用并花了我一些时间的解决方案希望这对某人有帮助！

请注意，克隆时您需要使用事件和数据进行深度克隆：

HTML：

<div class="dropbox"><p>Child element still works!</p></div>

<div class="dropbox"></div>

<div class="dropbox"></div>

jQuery

$('.dropbox').each(function(idx, el){
    $(this).data("counter" , 0);
});

$('.dropbox').clone(true,true).appendTo($('body');

$('dropbox').on({
    dragenter : function(e){
        $(this).data().counter++;
        <!-- YOUR CODE HERE -->
    },
      dragleave: function(e){

        $(this).data().counter--;

         if($(this).data().counter === 0)
              <!-- THEN RUN YOUR CODE HERE -->
    }
});
0
投票

这是 

window:dragleave
的事件处理程序，它检测是否有东西被拖到窗口之外

onDragLeave(evt: DragEvent) {
  const draggedOffScreen: boolean = evt.screenX === 0 && evt.screenY === 0
  console.log('draggedOffScreen', draggedOffScreen)
}
-2
投票
addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        // stop your drag event here
        // for now we can just use an alert
        alert("left window");
    }
});

这是从如何检测鼠标何时离开窗口？复制的。 addEvent 只是跨浏览器的 addEventListener。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.