1

概述

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

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

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

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;
});
4

1 回答 1

2

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

于 2012-06-03T23:55:26.447 回答