html5文件拖放事件混淆

Posted

技术标签:

【中文标题】html5文件拖放事件混淆【英文标题】:html5 file drag-n-drop event confusion 【发布时间】:2012-06-08 03:31:31 【问题描述】:

概述

我想将一个事件附加到一个元素以处理文件拖放事件,但似乎这个事件也被附加到所有子元素。例如,

$('#dragtarget').on('dragenter', function() 
    console.log('dragenter');
);

...如果我将文件拖到#dragtarget 元素的任何子元素上,控制台将输出dragenter。因此,如果我将此事件附加到 documentwindow,当鼠标悬停在页面上的任何元素上时,该事件将触发。

dragleave 也会发生同样的事情,除了离开子元素时。

问题

为什么会这样?是否可以将此事件附加到 only 预期的元素?如果没有,有没有办法将事件与所有子元素分离?

jsFiddle

这是一个可以修改的示例:http://jsfiddle.net/UnsungHero97/ePLV6/7/

请注意,当您将文件拖到框上时,边框如何变为实线,但在将鼠标悬停在文本上时又变为虚线

无论我是否将鼠标悬停在框中的文本上,我都希望在将文件拖动到框上时将边框变为实线

这是小提琴中的代码以防万一:

HTML

<div id="dragtarget">
    <span>File over/out here</span>
    <br/><br/>
    <span>more text here</span>
</div>

JS

// I expect only the #dragtarget element to fire the 'dragenter' and 'dragleave' events,
// not the child elements
$('#dragtarget').on('dragenter', function() 

    $(this).css(borderStyle: 'solid');

    event.stopPropagation();
    event.preventDefault();
    return false;

).on('dragleave', function() 

    $(this).css(borderStyle: 'dashed');

    event.stopPropagation();
    event.preventDefault();
    return false;
);

【问题讨论】:

我在您的演示中没有看到 任何 边框更改... 拍摄...我没有说明这是关于文件拖放的。 我还在小提琴中拼错了选择器。 【参考方案1】:

它没有。您可能会看到event bubbling。检查event.target 以查看您正在处理的事件源自何处。

【讨论】:

我不认为这是问题所在。我更改了代码以阻止事件传播,但没有任何改变。 你能告诉我们修改后的代码吗?因为这看起来确实像事件冒泡。 @GauravShetty... 它在 jsFiddle 中,但我已经更新了我的帖子以包含它 @Hristo 但是您确实希望它传播,如果事件从 div 中触发到跨度中,您只是不想翻转边框样式。查看html5 dragleave fired when hovering a child element。 @Hristo 我没有给你一个好的答案,有时事情很糟糕

以上是关于html5文件拖放事件混淆的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件?

HTML5 拖放 getData() 仅适用于 Chrome 中的拖放事件?

HTML5 拖放事件和 setDragImage 浏览器支持

Html5之高级-11 拖放API (拖放事件dataTransfer对象setDragImage方法)

HTML5拖放期间没有关键事件

理论 | HTML5 进阶系列:拖放 API 实现拖放排序