JavaScript/webGL从一个点击事件中定期鼠标坐标，直到第二个事件

Question

我有一个程序，可以模拟WebGL中的布（由春季和顶点制成）。该程序必须执行的操作是允许用户单击布上的一个点，在鼠标后将其拖动，如果用户再次单击，请将其释放。我需要检查哪个点击事件是启动拖动并终止它的事件，然后我使用了一个全局变量“单击”，将其设置为false，并在每次触发事件时进行互换。现在，对于拖动，我需要定期进行鼠标的坐标，但是我使用“ mousemove”事件是最好的解决方案：如果将“单击”设置为true，这意味着我们处于“拖动阶段” ，然后必须调用Mousemove事件并继续工作，直到下一次点击事件为止。问题是我不知道如何将Mousemove连接到点击事件：如果我将Mousemove事件放在点击事件之外，我们永远不会输入，如果我将Mousemove事件放在点击事件中，另外，如果“单击”变量从Trail到False更改，则始终调用Mousemove事件。代码的骨架是以下一个：

var clicked = false;


function exec() {

        let web_gl = document.getElementById("webgl-canvas").getContext('webgl2');
        web_gl.canvas.addEventListener('click', (e) => {
            clicked = !clicked;
            console.log(clicked);
            if (clicked == true) {
                web_gl.canvas.addEventListener('mousemove', (e) => {
                    //do something for dragging
                });
            };
        });
}

function main() {
    exec();
};

也在这里，如果控制台以正确的方式同时打印false和true，我们始终在IF条件下输入，似乎条件看到“单击”始终是正确的。 另一个选择是：

var clicked = false;


function exec() {

        let web_gl = document.getElementById("webgl-canvas").getContext('webgl2');
        web_gl.canvas.addEventListener('click', (e) => {
            clicked = !clicked;
            console.log(clicked);
        });
        if (clicked == true) {
            web_gl.canvas.addEventListener('click', (e) => {
                \\do something for dragging
            });
        }
}

function main() {
    exec();
};

在这种情况下，我们从未在此事件中输入，我不明白为什么。 有人对这个问题有暗示，还是一个更好的主意来处理我需要实施的内容？

Answer 1

对您的第二个片段进行调查：您的代码是异步执行的，事件处理程序在发出事件之前不会执行，因此单击 仍将处于其初始状态（false）时评估添加Mousemove处理程序的条件，因此不会添加，因此永远不会执行。

您要做的是在中添加两个事件处理程序，然后检查 mousemove事件处理程序，如果单击是是 code> true 。

顺便提一句。您将要实现的逻辑意味着用户必须单击（鼠标向下及向上）激活拖动并再次单击以解开接触，而不是常见的UI练习：单击（Mousedown）并保持拖动。

Answer 2

我找到了解决方案。我在Main（）函数中使用了单击事件，该函数仅称为一次，设置一个标志，以便在检测到单击时（从false到true t true and vice-vice-cice-cice-cice-vice-vice-vice-vice-vice-vice-vice-vice-vice-vice-vice-vice）。在单击事件中，如果标志为真，这是第一次单击，我添加了Mousemove事件，选择坐标。