Javascript jQuery下降区效应

我正在尝试这样做，当您将文件拖动到浏览器中时，将出现拖放区域，当您离开浏览器（或拖放文件）时，拖放区域效果将消失

然而，dragover和dragleave事件似乎并没有像我希望的那样触发，因为当你将一个文件拖到浏览器中时，drop zone将永远显示和隐藏

JSFIDLE

HTML:

删除要上载的文件

JS:

尝试添加

pointer-events:none;

到下拉窗口类的css

尝试添加

pointer-events:none;

---

到下拉窗口类的css

不用显示/隐藏元素，只需对其应用一个类，CSS可以进行颜色更改/虚线边框等操作，以获得相同的效果，并且鼠标下不会显示额外的元素以引起闪烁。大概是这样的：

var dropZone = $(document);

function onDrop (e) {
    e.preventDefault();
    $(this).removeClass('dragover');
    // do things
}

dropZone.on('dragover', function(){ $(this).addClass('dragover'); });
dropZone.on('dragleave', function(){ $(this).removeClass('dragover'); });
dropZone.on('drop', onDrop);

然后使用.dragover的CSS类完成剩下的工作

.dragover {
   border: 5px dashed green;
   background: lightblue;
}

或者甚至显示/隐藏一个专用元素，更像您最初的方法，但现在只使用CSS，类似于：

.my-upload-popup {
   position: fixed;
   display: none;
   top: 0; left: 0; right: 0; bottom: 0;
   width: 100%; 
   height: 100%;
   border: 5px dashed green;
   background: lightblue;
   pointer-events: none;
}

.dragover .my-upload-popup {
   display: block; 
   z-index: 10;
}

---

不用显示/隐藏元素，只需对其应用一个类，CSS可以进行颜色更改/虚线边框等操作，以获得相同的效果，并且鼠标下不会显示额外的元素以引起闪烁。大概是这样的：

var dropZone = $(document);

function onDrop (e) {
    e.preventDefault();
    $(this).removeClass('dragover');
    // do things
}

dropZone.on('dragover', function(){ $(this).addClass('dragover'); });
dropZone.on('dragleave', function(){ $(this).removeClass('dragover'); });
dropZone.on('drop', onDrop);

然后使用.dragover的CSS类完成剩下的工作

.dragover {
   border: 5px dashed green;
   background: lightblue;
}

或者甚至显示/隐藏一个专用元素，更像您最初的方法，但现在只使用CSS，类似于：

.my-upload-popup {
   position: fixed;
   display: none;
   top: 0; left: 0; right: 0; bottom: 0;
   width: 100%; 
   height: 100%;
   border: 5px dashed green;
   background: lightblue;
   pointer-events: none;
}

.dragover .my-upload-popup {
   display: block; 
   z-index: 10;
}