Firefox 在 div 滚动条上移动时触发拖动事件

Posted 2023-05-08

【中文标题】Firefox 在 div 滚动条上移动时触发拖动事件

【英文标题】：Firefox fires drag events when moving over div scrollbar

【发布时间】：2015-03-16 17:33:09

【问题描述】：

我想开发一个带有 div 和一些样式的文件拖放组件：

dragenter：更改 div 边框颜色 dragleave：恢复为原始 div 边框颜色

在 Firefox 35 (Ubuntu) 上，当 div 有滚动条（水平或垂直）并且通过滚动条移动文件时，我会发生以下事件：

dragenter：移过 div 边框 dragenter：在滚动条上移动 dragleave：离开滚动条

所以我在 div 中，但 dragleave 已被解雇，它取消了 div 新样式。 Chromium 没有这个问题。

有没有办法在 Firefox 中控制这些滚动条事件？

html：

<div id="appu">test-test-test-test-test-test-test-test-test-test-test-test</div>

CSS：

div#appu 
    height: 200px;
    width: 300px;
    border: 2px dotted black;
    overflow-x: auto;
    white-space: nowrap;


div#appu.over 
    border: 2px dotted red;

javascript：

$("#appu").on("dragenter", function(event) 
    console.log("dragenter");
    if (!$(this).hasClass("over")) 
        $(this).addClass("over");
    
);

$("#appu").on("dragleave", function() 
    console.log("dragleave");
    if ($(this).hasClass("over")) 
        $(this).removeClass("over");
    
);

http://jsfiddle.net/ag5vo9sb/

【参考方案1】：

在dragleave 处理程序中，您可以检查拖动来自哪个元素。如果源和目标相同，什么都不做。

$("#appu").on("dragleave", function(e) 
    if (e.relatedTarget === this) return; // Added this line
    if ($(this).hasClass("over")) 
        $(this).removeClass("over");
    
);

A live demo at jsFiddle.