要素を無限にフローティングJS

Question

すぐに問題が発生しました。要素を右から左に無限に移動する必要があります（この時点でmouseoverイベントを試行しています）。

function cucu2() { 
    document.getElementById('grande').style.cssFloat = 'right'; 
    document.getElementById('grande').addEventListener('mouseover', cucu, true); 
} 
function cucu() { 
    document.getElementById('grande').style.cssFloat = 'left'; 
    document.getElementById('grande').addEventListener('mouseover', cucu2); 
} 
window.addEventListener('load', cucu); 

それは、すぐに私はそれの近くにマウスオーバーとして、右側に完璧に動作し、それだけでOK初めて動作する側に、しかし、左側に要素を動かすには、第二1が遅れているように見えるとは、実際にはの効果が出るようにマウスで2〜3秒かかり、要素をもう一度左に移動します。私はリスナーのuseCapture値について何かを推測していますが、trueまたはfalseの両方でリスナーを設定すると、要素は1回だけ左に移動し、1回は右に移動し、ゲームオーバーになります。あなたはfloat: rightで#grandeを維持呼び出さcucu両方cucu2をマウスオーバーし、二回目で、再びそれらを削除しないリスナーを添付の上に

Answer 1

理由は、各マウスです。

修正する簡単な方法は、それを実行した後に呼び出すリスナーを削除します：

function cucu2() { 
 
    document.getElementById('grande').style.cssFloat = 'right'; 
 
    document.getElementById('grande').addEventListener('mouseover', cucu, true); 
 
    document.getElementById('grande').removeEventListener('mouseover', cucu2); 
 
} 
 
function cucu() { 
 
    document.getElementById('grande').style.cssFloat = 'left'; 
 
    document.getElementById('grande').addEventListener('mouseover', cucu2); 
 
    document.getElementById('grande').removeEventListener('mouseover', cucu); 
 
} 
 
window.addEventListener('load', cucu);

#grande { 
 
    background-color: yellow; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="grande"></div>

良い方法が切り替わりますイベントを添付することですfloat: rightfloat: left間：

window.addEventListener('load', function() { 
 
    var element = document.getElementById('grande'); 
 
    element.addEventListener('mouseover', function() { 
 
    //if element is floated left we float it right 
 
    element.style.cssFloat = element.style.cssFloat == 'right' ? 'left' : 'right'; 
 
    }); 
 
});

#grande { 
 
    background-color: yellow; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="grande"></div>