onmouseleaveはonmousemove内で動作しません

私は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; 
}

出典

2016-12-03 Thalliium_

内部で試してみてください。onmousemove .Both機能はmousemove

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

または

の時間に実行されています

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

出典

2016-12-03 14:46:40 prasanth

スクリプトコード全体がわかりませんが、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

出典

2016-12-03 14:48:29

私はインラインイベントをaddEventListnerで置き換えようとしましたが、残念なことに違いはありませんでした。 –

例を変更しました：https://jsfiddle.net/4hkkm7k5/1/ –

onmouseleaveはonmousemove内で動作しません

答えて

関連する問題