why there are square gathering at top left corner in this…div painting

Question

I can't figure out why...what am i doing wrong.

For some reasons elements with 0,0 are being created at top.

http://jsfiddle.net/6UamQ/

var m = $('.main'), div = $(document.createElement('div')), d;


m.on('mousemove',function(e){
    d = div.clone();
    d.addClass('paint');
    d.css({top:e.offsetY,left:e.offsetX});
    m.append(d);
});

Answer 1

The problem is that once you've added the div 's to main , you may get mousemove events from those child elements as well. Try filtering out those child events like this:

m.on('mousemove',function(e){
    if( e.target === this ) {
        d = div.clone();
        d.addClass('paint');
        d.css({top:e.offsetY,left:e.offsetX});
        m.append(d);
    }
});

Demonstration

Answer 2

It will work if you replace offsetY and offsetX with pageY and pageX. http://jsfiddle.net/6UamQ/4/

var m = $('.main'), div = $(document.createElement('div')), d;


m.on('mousemove',function(e){
d = div.clone();
d.addClass('paint');
d.css({top:e.pageY,left:e.pageX});
m.append(d);
});