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

Question

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

当拖动的项目进入放置区域时，该事件将第一次触发，同样当鼠标进入文本“Dropping area”时，该事件将第二次触发，知道鼠标仍在掉落区。

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