javascript - 在 Firefox 中多次触发拖动输入事件

Question

我在 Firefox 上遇到了拖动输入事件的问题，当鼠标仍在放置区域上移动时，浏览器会多次触发此事件。

当被拖动的项目进入放置区域时，第一次触发该事件，当鼠标进入文本“放置区域”时，第二次触发该事件，知道鼠标仍在放置区域.

$(document).ready(function(){

     $(".draggable").on("dragstart",function(event){
      event.originalEvent.dataTransfer.setData("Text","data");
      console.log("start");
     });

     $(".droppable").on("dragenter",function(event){
      event.preventDefault();
      console.log("enter");
     }); 
});

这是 HTML 代码：

    <div  class="widthBorders draggable" draggable="true">
        Draggable Item
    </div>
    <br/><br/>
    <div class="widthBorders droppable">
        <br/><br/>Dropping area
    </div>

这是一个完整的例子：jsfiddle example

Answer 1

最后我得到了这个答案：

var elements = $();
$(".droppable").on("dragenter",function(event){
    event.preventDefault();
    if(event.relatedTarget.nodeType == 3) return;
    if(event.target === event.relatedTarget) return;
    elements = elements.add(event.target);
    if(elements.length == 1) {
        //This code will be executed for once.
        console.log("enter");
    }
});