在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（＆＃34; click＆＃34;）不会覆盖之前的事件，因此在每次更改时，您都会向该点击添加另一个事件。

将事件绑定在更改之外（大多数人会做什么）或在重新分配之前取消绑定事件。

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