在Firefox中多次觸發拖動進入事件

Question

我在Firefox上的drag enter事件有問題，當鼠標仍在放置區域移動時，瀏覽器會多次觸發該事件。

當拖動的項目進入放置區域時，將首次觸發該事件，同樣，當鼠標進入文本“放置區域”時，將在知道鼠標仍在放置區域中時再次觸發該事件。

$(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示例

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");
    }
});