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

Question

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

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

Answer 1

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

.targetDiv * {
    pointer-events: none;
}

Answer 2

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

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

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

Answer 3

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

[draggable] * {pointer-events: none;}

Answer 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

Answer 5

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

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

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