Drag & Drop with nested target in HTML5

Question

I'm using HTML5 drag&drop; I have a droppable div and inside it I have another droppable div.

<div id="target-parent">
    <div id="target-child"></div>
</div>

The problem is that if I drag something into the target-child, fire his drop event (and this is right) but in the end fire also the target-parent event. How can the code understand that the dropped element is only target-child?

Answer 1

In your event handler examine the event.target and behave appropriately and/or call event.stopPropagation().