javascript - 在 js 中的更改事件上多次调用一个函数

Question

我在一个绘图应用程序中工作，我遇到了一个我似乎无法解决的冲突:绘制多边形时，必须首先在选择输入中选择边数。然后在多边形(图中的黑色多边形)上单击两次中心点和半径点问题是，如果您现在更改边的数量并尝试绘制一个新的多边形，2 个多边形会出现在彼此之上(蓝色多边形)。

我的函数看起来像这样:

function MyPoly(){
$("#mySelect").change(function(){
//on change - get n: number of edges
var selection = document.getElementById("mySelect");
var n = selection.options[selection.selectedIndex].value;

$(".canvas").on("click", function( $event ){    
//some code for drawing a polygon..
});
});

这是结果:

我做错了什么？如何在更改事件上调用具有不同值的相同函数而不让它同时运行？

Answer 1

您会看到多个事件触发，因为 on("click") 不会覆盖之前的事件，因此在每次更改时您都会向点击添加另一个事件。

要么在更改之外绑定(bind)事件(大多数人会这样做)，要么在重新分配之前取消绑定(bind)事件。

$(".canvas").off("click").on("click" ...