Question

Made a fiddle for this: http://jsfiddle.net/terjeto/MN4FJ/

My problem is that dragleave fires when you drag a file from desktop into the box and over the text inside the box. (drag a file into box will make the border solid -> drag the file over the text inside the box and the border will be dashed:->which is not what I want).

Is this a browser bug? (firefox 9@win).

I also put in a box for mouse up/down which works just fine so you can compare the two.

How can I achieve the correct dragenter / dragleave behaviour?

PS. I bind to body because I need the event-delegation in my real app.

Answer 1

This is a well documented shortcomming of the spec.
As Peter-Paul Koch points out here

A function like this might help you work out if the target element is a child of the target area that you want to drop the file onto.

function isChildElement(parent, child) {
    var childParent = child;
    while (childParent) {
        if (childParent == parent) {
           return true;
        }
        childParent = childParent.parentNode;
    }
    return false;
},