html5文件拖放事件混乱

时间:2012-06-03 23:45:43

标签: jquery html5 file-upload drag-and-drop

概述

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

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

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

dragleave也会发生同样的事情,除非留下子元素。

问题

为什么会这样?有没有将此事件附加到元素?如果没有,有没有办法从所有子元素中分离事件?

的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 个答案:

答案 0 :(得分:2)

没有。你可能会看到event bubbling。检查event.target以查看您处理的事件的来源。