javascript - mousedown-mouseup 以指数方式创建 div

Question

我正在尝试使用 Jquery 创建一个简单的“绘图”界面，可以在 div 中绘制形状。我正在使用 mousedown-mouseup 事件处理程序来实现此形状创建。在每个 mousedown-mouseup 上，必须在“canvas”div 上绘制一个形状。我对 mousedown 和 mouseup 使用单独的处理程序，而不仅仅是单击，因为我想在 mouseup 之前使形状可调整大小。

问题:
在我的 fiddle ，左侧有一个空间，我会记录每次点击以查看创建了多少个形状。
第一次点击，效果很好。我得到了一个很好的形状。然而，在后续的尝试中，单个 mousedown-mouseup 似乎会在“后台”创建更多 div。日志会显示每次点击的附加 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 事件，您都会附加一个新的 mouseup 监听器， 您想要将该事件绑定(bind)移出 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));
    })
;