Question

我有div onmousemove，我用它来制作一个跟随光标的对象。在此div中，我有另一个div和onmouseleave。问题是onmouseleave只有在我非常快速地从对象移出光标时才会起作用。但是，如果我删除onmousemove onmouseleave开始正常工作。如何让onmousemove和onmouseleave同时工作？

HTML：

<body>
    <div onmousemove="cursorMove(event)" id="main">
        <p id="title">...</p>
        <div onmouseleave="gameOver()" id="light"></div>
        <div id="cursor"></div>
    </div>
    <button onclick="moveLight()">move</button>
    <button onclick="startGame()">start</button>
    <script src="js/javascript.js"></script>
</body>

JavaScript

function cursorMove(event) {
    document.getElementById("cursor").style.top = event.clientY - 14;
    document.getElementById("cursor").style.left = event.clientX - 14;
    document.getElementById("cursor").style.opacity = '1';
}
function gameOver() {
    console.log("Game Over");
    document.getElementById("light").style.top = 245 + 'px';
    document.getElementById("light").style.left = 238 + 'px';
    document.getElementById("title").style.opacity = '1';
    document.getElementById("title").innerHTML = 'Enter the light';
    gameActive = false;
}

Answer 1

在内部尝试：onmousemove。函数在mousemove

时运行

function cursorMove(event) {
  document.getElementById("light").onmouseleave();
}

或

<div onmousemove="cursorMove(event),gameOver()" id="main">

Answer 2

我不知道你的整个脚本代码，但我认为你试图从非全局上下文中调用函数cursorMove和gameOver。您正在使用内联事件处理程序，您的函数必须位于窗口执行上下文中。

尝试不同的方法。示例：https://jsfiddle.net/4hkkm7k5/。

此外，内联事件处理程序可能不是一个好主意。请参阅：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don't_use_these

onmouseleave将不会在onmousemove内工作

2 个答案: