Question

我在一些div元素上分配了一个“mousemove”事件。由于动画过程，这些元素可能会相互重叠，因此可以通过将鼠标移动到重叠的部分上来一次调用几个“mousemove”事件。

问题在于两个触发的“mousemove”事件可能会导致相互冲突的决策。因此，我想基于所有与“mousemove”事件有关的元素做出决定，当这些事件发生在至少其中一个事件时。

我的问题是：你知道一种有效的方法吗？

谢谢！

Answer 1

如果我正确理解了q，你想同步每个div的mousemove事件的执行。有很多方法可以做到这一点，但最好的方法是更改HTML标记，这样就不会有重叠。

无论如何，对于您的情况，您可以执行以下操作：

var g_focusDivId = "";

function onMouseMove(e)
{
    if (g_focusDivId != "" && g_focusDivId != e.target.id)
         return; // Deciding to not exec any other mouse moves

    g_focusDivId = e.target.id;

    // Do your stuff

    g_focusDivId = "";
}

当然，这假设JS事件处理是单线程的，但并非总是如此：Is JavaScript guaranteed to be single-threaded?

替代方法是这样做（我没试过这个）。我正在使用队列在单个方法上按顺序运行事件。更多的控制，但它可能导致一些事件处理较晚。

var g_syncEventQueue = new Array();

function onMouseEvent(e)
{
    g_syncEventQueue.push(e);
}

function queueListenerProc()
{
    if (g_syncEventQueue.size() > 0)
    {
       var evt = g_syncEventQueue[0];
       g_syncEventQueue = g_syncEventQueue.splice(0, 1);
       return queueListenerProc(); // Immediately process the next event
    }

    setTimeout("queueListenerProc()", 1000);
}

queueListenerProc(); // Not ideal because it keeps running without an exit condition.

如何获取受事件影响的所有HTML元素

1 个答案: