CODEWITHSUNDEEP
javascriptcss
Muhammad Umer
Muhammad Umer

Reputation: 18127

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

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

Upvotes: 1

Views: 72

Answers (2)

A Steinmetz
A Steinmetz

Reputation: 136

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

Upvotes: 1

p.s.w.g
p.s.w.g

Reputation: 149050

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

Upvotes: 2

Related Questions