Question

我正在尝试创建一个简单的＆＃34;绘图＆＃34;使用Jquery的接口，可以在div中绘制形状。我正在使用mousedown-mouseup事件处理程序来实现这种形状创建。在每个mousedown-mouseup上，必须在＆＃39;画布上绘制一个形状。 DIV。我使用单独的处理程序进行mousedown和mouseup而不是单击，因为我想在mouseup之前调整形状的大小。

问题：
在我的 fiddle 中，左侧有一个空格，我记录每次点击以查看创建的形状数量。
首次点击，它工作正常。我的形状很好。然而，在接下来的尝试中，单个mousedown-mouseup似乎在后台产生了更多的div。＆＃39;。日志显示每次单击的其他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监听器，你想把那个事件绑定移出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你再次绑定鼠标。

只需添加

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

修复它。

Mousedown-mouseup以指数方式创建div

2 个答案: