Mousedown-mouseup создает divs экспоненциально

Question

Я пытаюсь создать простой интерфейс рисования с помощью Jquery, где можно рисовать фигуры в div. Я использую обработчики событий mousedown-mouseup для достижения этой формы. На каждом мышеловке мышь должна нарисовать фигуру на div. Я использую отдельные обработчики для mousedown и mouseup вместо одного щелчка, потому что я хочу сделать фигуру изменчивой до мыши.

ПРОБЛЕМА:
В моей fiddle, есть пространство слева, где, когда я захожу каждый клик, чтобы увидеть, сколько формы созданы.
Сначала нажмите, он отлично работает. Я получаю приятную форму. Тем не менее, на последующих попытках, один mousedown-mouseup, кажется, создает больше divs «на заднем плане». Журнал показывает дополнительные div для каждого клика, пока вы видите только одну фигуру для каждого клика.

Интересно, почему это происходит?

JS:

var num=0; 
$('.draw').mousedown(function(e){ 
    var newDiv = null; 
    newDiv = $('<div>').addClass('rec').css({ 
     'top': e.pageY, 
     'left': e.pageX 
    }).appendTo(this); 
    $(this).mouseup(function(){ 
     num++ 
     $('.elems').append($('<p>').text('rec '+num)); 

    }); 
}); 

Answer 1

Это связано с тем, что для каждого события mousedown вы присоединяете нового прослушивателя мыши, , который хотите переместить это событие, связанное с прослушивателем mousedown.

var num=0; 
$('.draw') 
    .mousedown(function(e){ 
     var newDiv = null; 
     newDiv = $('<div>').addClass('rec').css({ 
      'top': e.pageY, 
      'left': e.pageX 
     }).appendTo(this); 
    }) 
    .mouseup(function(){ 
     num++; 
     $('.elems').append($('<p>').text('rec '+num)); 
    }) 
; 

Answer 2

См http://jsfiddle.net/m6zgh5r3/3/

Это потому, что Происходило на каждом MouseDown вы связываете снова MouseUp.

Просто добавив

$(this).unbind("mouseup"); 

фиксирует это.