html5 文件拖放事件混淆

Question

我想将事件附加到元素以处理文件拖放事件，但似乎此事件也附加到所有子元素。例如

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

...如果我将文件拖到属于#dragTarget元素的任何元素上，控制台将输出dragenter。因此，如果我将此事件附加到文档或窗口，则当悬停在页面上的任何元素上时，事件将触发。

对于＜code＞dragleave

为什么会这样？有没有办法把这个事件只附加到指定的元素上？如果没有，有没有办法将事件从所有子元素中分离出来？

这里有一个摆弄的例子：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;
});

Answer 1

没有。你可能正在看到一个事件的泡沫。检查＜code＞事件。target以查看您正在处理的事件的起源。