我想开发一个带有 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");
}
});
最佳答案
在dragleave处理程序中,您可以检查拖动来自哪个元素。如果源和目标相同,则不执行任何操作。
$("#appu").on("dragleave", function(e) {
if (e.relatedTarget === this) {return;} // Added this line
if ($(this).hasClass("over")) {
$(this).removeClass("over");
}
});
关于javascript - Firefox 在 div 滚动条上移动时触发拖动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28012310/