jQuery拖放鼠标悬停时闪烁（仅限Webkit） 问题

我刚刚完成了一项功能的实现，用户可以将文件拖到浏览器中，然后放到支持文件上传的插件上，该插件可以处理文件的下载

然而，为了给用户一个提示，他们甚至可以在第一时间放下东西，我实现了一个

dragover

事件来显示一个

div

，它类似于“放在这里”。这反过来会隐藏带有“选择文件…”按钮的

div

，并替换它，直到用户停止拖动

但是，当我实现这一点时，在目标区域上拖动会导致闪烁。要明确的是：

• 显示带有“选择文件”界面的

  div

• 拖动项目（或拖动选定文本）；显示“此处放置”
• 项目拖过“此处放置”区域；闪烁开始

此外：

• Opera 12或Firefox 16没有问题
• 这个问题在Chrome 23和Safari 5中显而易见
• 问题部分存在于IE 9中（IE 10未经测试）；它闪烁约5秒钟，然后停止

（警告：小提琴非常粗糙。）

只需选择一些文本并将其拖到蓝色框上，您就会看到发生了什么；很明显，它不应该表现出的行为

小提琴中使用的代码 我的解决方案。。。？ 老实说，我不知道该试什么。关于

dragover

或

dragleave

的行为没有大量的文档，我甚至不知道为什么会发生这种情况，所以我甚至无法开始调试它。我觉得

dragover

应该只触发一次，但即使在屏幕上拖动，也会一次又一次地触发

我查看了谷歌图片和谷歌联系人的拖放行为，但他们的代码完全缩小了，无法阅读，我甚至找不到任何指定的“拖放”行为

那么，对于这种看似奇怪的行为有什么解决办法吗？如果这是我怀疑的WebKit中的一个bug，那么我是否可以使用一些优秀的解决方法和/或破解方法

---

谢谢大家的时间

经过一个多小时的搜索，我找到了。Chrome和Safari（至少5个）似乎在进入子元素时（并且似乎在对该元素进行任何更改时，包括显示/隐藏子元素时）触发了dragleave

解决方案是检查

pageX

和

pageY

是否等于

dragleave

中的

0

（而不是

drop

）

---

我发现，使用Eric的解决方案后，如果我在Win10 Google Chrome上拖出屏幕（转到另一个窗口），它对我不起作用。将条件更改为并起作用

var $dropTarget = $("#container");
$(document).bind("dragenter", function(e) {
    if (e.target == this) {
         return;
    }

    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave", function(e) {
    if (e.originalEvent.pageX != 0 || e.originalEvent.pageY != 0) {
        return false;
    }

    // Could use .trigger("drop") here.
    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
}).bind("drop", function(e) {
    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});​

---

我有一个使用拖放文件的项目，在我的项目中发现了相同的问题， 这是针对您的问题的解决方案，并在您的案例中进行了测试，这是100%的工作

这是神奇的密码：

<style type="text/css">
    .drag * {
        pointer-events: none;
    }
</style>

<div class="drag" id='container'>
<div name='drop' style='display: none;'>DROP HERE</div>
<div name='drag'>DRAG HERE</div>
</div> 

.拖动*{
指针事件：无；
}
到这里来
拖到这里

OMG，三重式。为此，我在互联网上搜索了几个小时。谢谢，很好！我只把| |改成了&&而且效果很好。谢谢。你可以选择你的回答，控制查找，并突出显示他的整个答案。这应该删除-这是他的答案的精确副本。如果您认为存在条件修复，请修改您的响应以反映这一点。

var $dropTarget = $("#container");
$(document).bind("dragenter", function(e) {
    if (e.target == this) {
         return;
    }

    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave", function(e) {
    if (e.originalEvent.pageX != 0 || e.originalEvent.pageY != 0) {
        return false;
    }

    // Could use .trigger("drop") here.
    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
}).bind("drop", function(e) {
    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});​

<style type="text/css">
    .drag * {
        pointer-events: none;
    }
</style>

<div class="drag" id='container'>
<div name='drop' style='display: none;'>DROP HERE</div>
<div name='drag'>DRAG HERE</div>
</div>