У меня есть div
с onmousemove
, который я использую для создания объекта, следуя указателю. В пределах этого div
у меня есть еще div
с onmouseleave
. Проблема в том, что onmouseleave
будет работать, только если я быстро вытащу курсор из объекта. Однако, если я удалю onmousemove
, onmouseleave
начнет работать правильно. Как я могу получить onmousemove
и onmouseleave
для работы в одно и то же время?onmouseleave не работает в пределах onmousemove
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;
}
Я попытался заменить inline-события на addEventListner, но это, к сожалению, не имело никакого значения. –
Я изменил пример: https://jsfiddle.net/4hkkm7k5/1/ –