Javascript 需要2次单击事件侦听器才能由2次不同的单击触发。（JS）

我目前正在尝试制作一个跳棋游戏（没有AI），以帮助我学习JS和HTML事件和动画。这是家庭作业。如果这是其他地方已经回答过的问题，请原谅我，并为我指出正确的方向

这是此问题的相关代码：

canvas = document.getElementById('board');
        canvas.addEventListener('click', funcMovePiece);
function funcMovePiece(event)
    {
        var legalMove = false;
        var DXClick = 0;
        var DYClick = 0;
        var Drow = 0;
        var Dcol = 0;
        var pieceColor;
        //First Click
        var SXClick = event.pageX;
        var SYClick = event.pageY;
        var Scol = parseInt(SXClick / 100);
        var Srow = parseInt(SYClick / 100);

            canvas.addEventListener('click', funcGetSecondClick); 
            //Problem: First click gives me SX and SY, then skips this function. Browser finishes interpreting.
                    //Second click skips SX and SY (leaving them undefined) and triggers this function. Browser finishes interpreting.
            function funcGetSecondClick(event)
            {
                //Second Click
                DXClick = event.pageX;
                DYClick = event.pageY;
                Dcol = parseInt(DXClick / 100);
                Drow = parseInt(DYClick / 100);
            }

所谓列（umn）和行，我指的是8x8 2D数组中的列和行。这两组行和列变量最终将用作条件语句的索引。如果认为相关，我可以包含代码的其余部分。我确实有一个名为jquery的jquery链接。 我遇到的问题是，一旦单击第一个片段并触发单击事件，它就会跳过第二个单击事件。未更改DXClick和DYClick的X和Y。如果我再次单击，它将重新解释程序，进入第二个单击事件函数，使SXClick和SYClick未定义。

---

S代表源并表示第一次单击，而D代表目标并表示第二次单击。我的意图是，有人可以点击一个棋盘格，然后点击一个空的红方块。该程序确定这是否是合法的移动，并移动棋子（代码中还没有提到这一点）。

看看人们通常不会在跳棋中双击棋子。单击一个工件，然后双击要将其移动到的位置，这将非常尴尬。我需要第一次单击以获取棋盘格的X-Y坐标，然后第二次单击以获取他们单击下一步的正方形的X-Y坐标，以便我可以查看这是否是合法移动。不过谢谢。我正在查看它。删除事件侦听器…为什么我没有想到这一点？哈哈，谢谢你！

canvas = document.getElementById('board');
canvas.addEventListener('click', funcMovePiece);
    function funcMovePiece(event)
        {
            var legalMove = false;
            var DXClick = 0;
            var DYClick = 0;
            var Drow = 0;
            var Dcol = 0;
            var pieceColor;
            //First Click
            var SXClick = event.pageX;
            var SYClick = event.pageY;
            var Scol = parseInt(SXClick / 100);
            var Srow = parseInt(SYClick / 100);
             alert('first click');

             canvas.removeEventListener('click', funcMovePiece); 
             canvas.addEventListener('click', funcGetSecondClick);              
        }

 function funcGetSecondClick(event)
                {
                    alert('second click');
                    DXClick = event.pageX;
                    DYClick = event.pageY;
                    Dcol = parseInt(DXClick / 100);
                    Drow = parseInt(DYClick / 100);                   

                    canvas.removeEventListener('click',funcGetSecondClick); 
                    canvas.addEventListener('click', funcMovePiece); 
                }