blocks|key|794103|text|你的代码一定有别的问题。我在这里模拟了一个简单的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|794104|http://jsfiddle.net/M59j6/6/|offset|length|794105|您可以看到，子元素不会干扰事件。|794106|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

Something else must be going on with your code. I mocked up a simple example here:

<a href="http://jsfiddle.net/M59j6/6/" rel="nofollow">http://jsfiddle.net/M59j6/6/</a>

and you can see that child elements don't interfere with the events.

blocks|key|1008444|text|拖放规范存在严重缺陷，很难使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008445|通过跟踪子元素，可以实现预期的行为(子元素不受干扰)。|1008446|下面是一个简短的示例，说明如何(使用jQuery)执行此操作：|1008447|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;
++}
});|code-block|syntax|javascript|1008448|致词：'dragleave'+of+parent+element+fires+when+dragging+over+children+elements|offset|length|1008449|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/10867506^0|0|0|0|0|3|20|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

The drag &amp; drop spec is seriously flawed and quite hard to work with.

By tracking child elements it's possible to achieve the expected behaviour (of child-elements not interfering).

Below is a short example of how to do this (with jQuery):

<pre><code>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;
 }
});
</code></pre>

Credits:
<a href="https://stackoverflow.com/questions/10867506">&#39;dragleave&#39; of parent element fires when dragging over children elements</a>

blocks|key|1008486|text|您可以在CSS中为所有子对象禁用指针事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008487|.targetDiv+*+{
++++pointer-events:+none;
}|code-block|syntax|javascript|1008488|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can disable the pointer-events in CSS for all children.

<pre><code>.targetDiv * {
 pointer-events: none;
}
</code></pre>

blocks|key|794418|text|Bastiaan的答案在技术上是正确的，尽管它是针对OP的。这是一种更简洁、更通用的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|794419|[draggable]+*+{pointer-events:+none;}|code-block|syntax|javascript|794420|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Bastiaan's answer is technically correct though it was specific to the OP. This is a much cleaner and universal approach:
<pre><code>[draggable] * {pointer-events: none;}
</code></pre>

I have a <code>&lt;div&gt;</code> drop target that I have attached 'drop' and 'dragover' events to. The <code>&lt;div&gt;</code> contains an image inside an anchor tag (simplistically: <code>&lt;div&gt;&lt;a&gt;&lt;img /&gt;&lt;/a&gt;&lt;/div&gt;</code>). The child elements of the target seem to block the 'drop' or 'dragover' events from being triggered. Only when the dragged element is over the target, but NOT over its child elements, are both events triggered as expected.

The behavior I would like to achieve is that the 'dragover' and 'drop' events are triggered anywhere over the target <code>&lt;div&gt;</code>, regardless of the existence of child elements.

How to keep child elements from interfering with HTML5 dragover and drop events?

jQuery

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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