1

概要

ファイルのドラッグアンドドロップイベントを処理するために要素にイベントをアタッチしたいのですが、このイベントはすべての子要素にもアタッチされているようです。例えば、

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

...要素の子である要素の上にファイルをドラッグする#dragtargetと、コンソールは。を出力しますdragenter。したがって、このイベントをdocumentまたはに添付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 に答える