Javascript Mousedown mouseup以指数方式创建div

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

问题：
在我的中，左侧有一个空白处，我记录每次单击以查看创建了多少形状。
第一次单击时，它工作正常。我的身材很好。然而，在随后的尝试中，一个mousedown mouseup似乎会在“后台”创建更多div。日志显示每次单击的附加div，而每次单击仅显示一个形状

我想知道为什么会这样

JS:

var num=0；
$（'.draw'）.mousedown（函数（e）{
var newDiv=null；
newDiv=$（''）.addClass（'rec'）.css({
“顶部”：e.pageY，
“左”：e.pageX
}).附于（本）；
$（this.mouseup（function（））{
num++
$（'.elems'）.append（$（''）.text（'rec'+num））；
});
});

请参见

这是因为每次鼠标下移时，你都会再次绑定鼠标

只是加上

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

修复它。

请参阅

这是因为每次鼠标下移时，你都会再次绑定鼠标

只是加上

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

---

修复它。

这是因为对于每个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));
    })
;

var num=0；
$（“.draw”）
.mousedown（函数（e）{
var newDiv=null；
newDiv=$（''）.addClass（'rec'）.css({
“顶部”：e.pageY，
“左”：e.pageX
}).附于（本）；
})
.mouseup（函数（）{
num++；
$（'.elems'）.append（$（''）.text（'rec'+num））；
})
;

这是因为对于每个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));
    })
;

var num=0；
$（“.draw”）
.mousedown（函数（e）{
var newDiv=null；
newDiv=$（''）.addClass（'rec'）.css({
“顶部”：e.pageY，
“左”：e.pageX
}).附于（本）；
})
.mouseup（函数（）{
num++；
$（'.elems'）.append（$（''）.text（'rec'+num））；
})
;

虽然您的解决方案“解决”了问题，但完全没有必要绑定和解除绑定此事件侦听器。我同意LJ_1102。这完全有效，尽管我从未想过解开鼠标@LJ_1102，你怎么说没有必要解除绑定此事件侦听器？

完全没有必要绑定和解除绑定

我的意思是打开和关闭此事件侦听器。它的长度应足以将其捆绑一次，然后就这样离开。我这边的措辞很糟糕。虽然您的解决方案“解决”了问题，但完全没有必要绑定和解除绑定此事件侦听器。我同意LJ_1102。这完全有效，尽管我从未想过解开鼠标@LJ_1102，你怎么说没有必要解除绑定此事件侦听器？

完全没有必要绑定和解除绑定

我的意思是打开和关闭此事件侦听器。它的长度应足以将其捆绑一次，然后就这样离开。我的措辞很糟糕，谢谢。这很有效。出于某种原因，我想把“鼠标”放进去，但因为它会产生一些冲突，所以我就这么做。哦，顺便说一下。我之所以这样编写代码，是因为在

mouseup

中，我试图使用在

mousedown

中创建的变量。如果我将

mouseup

链接，则无法访问此变量，因为它是在

mousedown

中本地创建的。如果您考虑在

mousedown

事件中分配它以访问创建的div，我建议使用第二个“全局”变量（如

num

）存储对当前“编辑的”

div

的引用，或向其中添加类

最新的

。@jacelysh请参阅我在上面的评论。另外，作为一个侧重点，你正在谈论一个“绘图”界面，你可能想考虑使用<代码>画布< /Case>元素，因为在达到一定数量的元素之后DOM插入会变得非常慢。这是因为浏览器在每次插入时都会重新绘制和重新绘制。耶，我也考虑过使用

画布。当我尝试使用JS构建这个接口时，我想到了这个东西。我将只使用一个全局变量。谢谢。你帮了大忙，谢谢。这很有效。出于某种原因，我想把“鼠标”放进去，但因为它会产生一些冲突，所以我就这么做。哦，顺便说一下。我之所以这样编写代码，是因为在
mouseup
中，我试图使用在
mousedown
中创建的变量。如果我将
mouseup
链接，则无法访问此变量，因为它是在
mousedown
中本地创建的。如果您考虑在
mousedown
事件中分配它以访问创建的div，我建议使用第二个“全局”变量（如
num
）存储对当前“编辑的”
div
的引用，或向其中添加类
最新的
。@jacelysh请参阅我在上面的评论。另外，作为一个侧重点，你正在谈论一个“绘图”界面，你可能想考虑使用<代码>画布< /Case>元素，因为在达到一定数量的元素之后DOM插入会变得非常慢。这是因为浏览器在每次插入时都会重新绘制和重新绘制。耶，我也考虑过使用
画布。当我尝试使用JS构建这个接口时，我想到了这个东西。我将只使用一个全局变量。谢谢。你帮了大忙。