如何防止子元素干扰 HTML5 拖放事件？

Posted 2023-05-08

【中文标题】如何防止子元素干扰 HTML5 拖放事件？

【英文标题】：How to keep child elements from interfering with HTML5 dragover and drop events?

【发布时间】：2011-06-23 23:08:40

【问题描述】：

我有一个<div> 放置目标，我已将“drop”和“dragover”事件附加到该目标。 <div> 包含一个锚标记内的图像（简单地说：<div><a><img /></a></div>）。目标的子元素似乎阻止触发“drop”或“dragover”事件。只有当被拖动的元素在目标上方而不是在其子元素上方时，这两个事件才会按预期触发。

我想要实现的行为是，无论是否存在子元素，都会在目标 <div> 上的任何位置触发 'dragover' 和 'drop' 事件。

【问题讨论】：

如果将事件附加到 或 会发生什么？

在这种情况下它按预期工作，但我需要能够将事件附加到整个容器。我看不出有什么理由不这样做。

在这里查看我的解决方法：***.com/a/15216514/865467

【参考方案1】：

您可以在 CSS 中为所有子级禁用指针事件。

.targetDiv * 
    pointer-events: none;

【参考方案2】：

与最初的问题有些倾斜，但我在这里用谷歌搜索，想知道以下几点：

如何使<img />（<div draggable="true">...</div> 容器的子级）正确地作为用于移动该容器的句柄？

简单：<img src="jake.jpg" draggable="false" />

【讨论】：

'A' 的想法，但这在 Chrome 中不起作用。我注意到 draggable 属性似乎几乎被完全忽略了。

【参考方案3】：

Bastiaan 的回答在技术上是正确的，尽管它是针对 OP 的。这是一种更清洁和通用的方法：

[draggable] * pointer-events: none;

【参考方案4】：

拖放规范存在严重缺陷，很难使用。

通过跟踪子元素，可以实现预期的行为（子元素不干扰）。

下面是一个简短的例子，说明如何做到这一点（使用 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

【参考方案5】：

您的代码肯定有其他问题。我在这里模拟了一个简单的例子：

http://jsfiddle.net/M59j6/6/

您可以看到子元素不会干扰事件。

【讨论】：

这是 jQuery DnD，不是 html5。

嗯？我使用 jquery 来编写更短的代码，但 dragover/dragleave/drop 是标准的 HTML5 事件。

您可以看到同样的问题，在您的示例中，当悬停在父元素和子元素之间时，有时会触发 dargleave

在这里听 - 如果问题的标签是指 javascript，那么请，为了所有理智的人的爱，不要在 jQuery 中回答 - 而且没有 jQuery 不是 JavaScript - 是的，它适用于 JavaScript但这不是一回事，所以不要假装它是。 ..祝你有美好的一天。