Question

我有一个<div>投放目标，我附加了'drop'和'dragover'事件。 <div>包含锚标记内的图像（简单地说：<div><a><img /></a></div>）。目标的子元素似乎阻止触发“掉落”或“悬垂”事件。只有当被拖动的元素超过目标但未覆盖其子元素时，才会按预期触发事件。

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

Answer 1

对原始问题有些偏袒，但我在这里用Google搜索，想知道以下内容：

如何使<img />（{1}}容器的子容器正确地作为用于移动该容器的句柄？

简单：<div draggable="true">...</div>

Answer 2

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

.targetDiv * {
    pointer-events: none;
}

Answer 3

阻力＆amp; drop spec存在严重缺陷，很难处理。

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

以下是如何执行此操作的简短示例（使用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 4

Bastiaan 的回答在技术上是正确的，尽管它特定于 OP。这是一种更简洁、更通用的方法：

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

Answer 5

您的代码必须继续进行其他操作。我在这里嘲笑了一个简单的例子：

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

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

如何防止子元素干扰HTML5 dragover和drop事件？

5 个答案: