需要2点击事件监听器才能被2个不同的点击触发。 （JS）

Question

我目前正在尝试将跳棋游戏（没有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);
            }

通过col（umn）和row，我的意思是8x8 2D数组中的列和行。 2组行和列变量最终将用作条件语句的索引。如果它被认为是相关的，我可以包括我的其余代码。我有一个名为的jquery链接。 我遇到的问题是，一旦点击第一部分并触发点击事件，它就完全跳过第二次点击事件。 DXClick和DYClick的我的X和Y没有被更改。如果我再次单击，它会重新解释该程序，进入第二次单击事件功能，使SXClick和SYClick未定义。 S代表Source并表示第一次单击，而D代表destination并表示第二次单击。我的意图是有人可以点击一个棋子，然后点击一个空的红色方块。该程序确定它是否合法移动并移动该部分（尚未在代码中获得那么远）。

Answer 1

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); 
                }