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

Question

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

问题是两个触发的“mousemove”事件可能导致相互冲突的决定。因此，我想根据“mousemove”事件所涉及的所有元素做出决定，当这样的事件至少发生在其中一个时。

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

谢谢 ！

Answer 1

如果我正确理解了 q，您希望为每个 div 同步 mousemove 事件的执行。虽然最好的方法是更改​​您的 HTML 标记，但有一些 hacky 方法可以做到这一点，因此您不会有重叠。

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

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 事件处理是单线程的，但这并不总是正确的：JavaScript 是否保证是单线程的？

另一种方法是这样做（我没有尝试过）。我正在使用队列在单个方法上按顺序运行事件。更加可控，但可能会导致某些事件处理较晚。

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.