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

Question

我有一个<div>下拉目标,我附加了'drop'和'dragover'事件.该<div>包含图像的锚定标记(简单化:<div><a><img /></a></div>).目标的子元素似乎阻止触发"掉落"或"悬垂"事件.仅当拖动的元素位于目标上方但未覆盖其子元素时,才会按预期触发这两个事件.

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

Answer 1

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

.targetDiv * {
    pointer-events: none;
}

Answer 2

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

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

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