包括孩子在内的jQuery dragenter或dragover

我目前正在处理上传脚本，当然它还具有拖放function。

但是我试图让这个工作当我在我的元素上拖动一个文件时它会添加类拖动但是因为我的元素有子节点它会不断触发因为它进入和离开元素。

我想知道的是如何扩展*dragenter* / *dragover*以包括儿童的主要元素？

这是我的代码的精简版（请注意我已禁用文件输入）：

 $(document).ready(function(){ $(window).on('dragenter', function(){ $(this).preventDefault(); }); $('#drag-and-drop-zone').on('dragenter', function(){ $(this).addClass('drag-over'); }); $('#drag-and-drop-zone').on('dragleave', function(){ $(this).removeClass('drag-over'); }); }); 

 .uploader { width: 100%; background-color: #f9f9f9; color: #92AAB0; text-align: center; vertical-align: middle; padding: 30px 0px; margin-bottom: 10px; border-radius: 5px; font-size: 200%; box-shadow: inset 0px 0px 20px #c9afb2; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .uploader div.or { font-size: 50%; font-weight: bold; color: #C0C0C0; padding: 10px; } .uploader div.browser label { background-color: #ffffff; border: 2px solid #f44; padding: 5px 15px; color: #f44; padding: 6px 0px; font-size: 40%; font-weight: bold; cursor: pointer; border-radius: 2px; position: relative; overflow: hidden; display: block; width: 300px; margin: 20px auto 0px auto; transition: all 0.3s linear 0s; } .uploader div.browser span { cursor: pointer; } .uploader div.browser input { position: absolute; top: 0; right: 0; margin: 0; border: solid transparent; border-width: 0 0 100px 200px; opacity: .0; filter: alpha(opacity= 0); direction: ltr; cursor: pointer; } .uploader div.browser label:hover { background-color: #f44; color: #fff; border: 2px solid #fff; } .drag-over{ border: 2px solid #00aef0; } 

  
 
Drag & Drop Images Here
 
-or-
 
  Select Image   
  

Answer 1

解决了!!

这是一个简单的例子，而不是on （’dragenter’）我需要使用bind（’dragover’）

 $(document).ready(function(){ $(window).on('dragenter', function(){ $(this).preventDefault(); }); $('#drag-and-drop-zone').bind('dragover', function(){ $(this).addClass('drag-over'); }); $('#drag-and-drop-zone').bind('dragleave', function(){ $(this).removeClass('drag-over'); }); }); 

 .uploader { width: 100%; background-color: #f9f9f9; color: #92AAB0; text-align: center; vertical-align: middle; padding: 30px 0px; margin-bottom: 10px; border-radius: 5px; font-size: 200%; box-shadow: inset 0px 0px 20px #c9afb2; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .uploader div.or { font-size: 50%; font-weight: bold; color: #C0C0C0; padding: 10px; } .uploader div.browser label { background-color: #ffffff; border: 2px solid #f44; padding: 5px 15px; color: #f44; padding: 6px 0px; font-size: 40%; font-weight: bold; cursor: pointer; border-radius: 2px; position: relative; overflow: hidden; display: block; width: 300px; margin: 20px auto 0px auto; transition: all 0.3s linear 0s; } .uploader div.browser span { cursor: pointer; } .uploader div.browser input { position: absolute; top: 0; right: 0; margin: 0; border: solid transparent; border-width: 0 0 100px 200px; opacity: .0; filter: alpha(opacity= 0); direction: ltr; cursor: pointer; } .uploader div.browser label:hover { background-color: #f44; color: #fff; border: 2px solid #fff; } .drag-over{ border: 2px solid #00aef0; } 

  
 
Drag & Drop Images Here
 
-or-
 
  Select Image   
  

Answer 2

您可以通过样式隐藏鼠标交互中的元素：

例如，将其添加到子元素：

 pointer-events: none; 

不幸的是，在IE中支持不是很好： http ： //caniuse.com/#feat=pointer-events

Answer 3

我发现了其他2种工作方案。

它只有在区域内没有其他控制器元素（编辑，删除）时才有效，因为此解决方案也会阻止它们：

 #drop * {pointer-events: none;} 

有一个更好的解决方案 。

这个想法是你每次进入/hover在新的子元素上时都会增加一个计数器，当你离开其中一个元素时减少计数器。

 $(document).ready(function(){ var dropzoneCounter = 0; $('#drag-and-drop-zone').on('dragenter', function(){ dropzoneCounter++; $(this).addClass('drag-over'); }); $('#drag-and-drop-zone').bind('dragleave', function(){ dropzoneCounter--; if (dropzoneCounter === 0) { $(this).removeClass('drag-over'); } }); $('#drag-and-drop-zone').bind('drop', function(){ dropzoneCounter = 0; $(this).removeClass('drag-over'); }); });