栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

拖动子元素时会触发父元素的“ dragleave”

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

拖动子元素时会触发父元素的“ dragleave”

我终于找到了我满意的解决方案。我实际上找到了几种方法来做自己想做的事,但是没有一种方法能像当前解决方案一样成功。在一种解决方案中,由于在

#dropzone
元素上添加/删除了边框,我经常出现闪烁现象。如果将鼠标悬停在浏览器之外,则不会删除它。

无论如何,我最好的hacky解决方案是这样的:

var dragging = 0;attachEvent(window, 'dragenter', function(event) {    dragging++;    $(dropzone).addClass('drag-n-drop-hover');    event.stopPropagation();    event.preventDefault();    return false;});attachEvent(window, 'dragover', function(event) {    $(dropzone).addClass('drag-n-drop-hover');    event.stopPropagation();    event.preventDefault();    return false;});attachEvent(window, 'dragleave', function(event) {    dragging--;    if (dragging === 0) {        $(dropzone).removeClass('drag-n-drop-hover');    }    event.stopPropagation();    event.preventDefault();    return false;});

效果很好,但是Firefox中出现了问题,因为Firefox是双重调用的,

dragenter
所以我的计数器关闭了。但是,这并不是一个非常优雅的解决方案。

然后我偶然发现了一个问题:在窗口外拖动时如何检测Firefox中的dragleave事件

因此,我接受了答案并将其应用于我的情况:

$.fn.dndhover = function(options) {    return this.each(function() {        var self = $(this);        var collection = $();        self.on('dragenter', function(event) { if (collection.size() === 0) {     self.trigger('dndHoverStart'); } collection = collection.add(event.target);        });        self.on('dragleave', function(event) {  setTimeout(function() {     collection = collection.not(event.target);     if (collection.size() === 0) {         self.trigger('dndHoverEnd');     } }, 1);        });    });};$('#dropzone').dndhover().on({    'dndHoverStart': function(event) {        $('#dropzone').addClass('drag-n-drop-hover');        event.stopPropagation();        event.preventDefault();        return false;    },    'dndHoverEnd': function(event) {        $('#dropzone').removeClass('drag-n-drop-hover');        event.stopPropagation();        event.preventDefault();        return false;    }});

这是干净优雅的,似乎可以在到目前为止我测试过的所有浏览器中使用(尚未测试IE)。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/464924.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号