如何防止子元素干扰HTML5的拖放事件？
如何防止子元素干扰HTML5的拖放事件？
提问于 2011-02-09 15:37:37
我有一个<div>拖放目标，我已经将' drop‘和'dragover’事件附加到该目标。<div>在一个锚标记(简单地说是：<div><a><img /></a></div>)中包含一个图像。目标的子元素似乎阻止了“drop”或“dragover”事件被触发。只有当拖动的元素在目标上，而不是在其子元素上时，才会按预期触发这两个事件。
我想要实现的行为是，“dragover”和“drop”事件在目标<div>上的任何位置触发，而不管是否存在子元素。
回答 4
Stack Overflow用户
发布于 2017-08-27 17:49:57
您可以在CSS中为所有子对象禁用指针事件。
.targetDiv * {
pointer-events: none;
}Stack Overflow用户
发布于 2021-03-16 20:41:01
Bastiaan的答案在技术上是正确的，尽管它是针对OP的。这是一种更简洁、更通用的方法：
[draggable] * {pointer-events: none;}Stack Overflow用户
发布于 2012-06-30 05:03:43
拖放规范存在严重缺陷，很难使用。
通过跟踪子元素，可以实现预期的行为(子元素不受干扰)。
下面是一个简短的示例，说明如何(使用jQuery)执行此操作：
jQuery.fn.dndhover = function(options) {
return this.each(function() {
var self = jQuery(this);
var collection = jQuery();
self.on('dragenter', function(event) {
if (collection.size() === 0) {
self.trigger('dndHoverStart');
}
collection = collection.add(event.target);
});
self.on('dragleave', function(event) {
collection = collection.not(event.target);
if (collection.size() === 0) {
self.trigger('dndHoverEnd');
}
});
});
};
jQuery('#my-dropzone').dndhover().on({
'dndHoverStart': function(event) {
jQuery('#my-dropzone').addClass('dnd-hover');
event.stopPropagation();
event.preventDefault();
return false;
},
'dndHoverEnd': function(event) {
jQuery('#my-dropzone').removeClass('dnd-hover');
event.stopPropagation();
event.preventDefault();
return false;
}
});致词：'dragleave' of parent element fires when dragging over children elements
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4942375
复制相关文章
相似问题