マウスダウンが押されたときにのみマウス移動イベントを実装する必要があります。
マウスを下に動かしてマウスを動かしたときにのみ「OK移動」を実行する必要があります。
私はこのコードを使用しました
$(".floor").mousedown(function() {
$(".floor").bind('mouseover',function(){
alert("OK Moved!");
});
})
.mouseup(function() {
$(".floor").unbind('mouseover');
});
mosemove
イベントを使用します。
mousemove
および mouseover
jquery docsから:
mousemove
イベントは、マウスポインタが要素内に移動すると要素に送信されます。
mouseover
イベントは、マウスポインタが要素に入ると要素に送信されます。
例:(コンソール出力を確認してください)
$(".floor").mousedown(function () {
$(this).mousemove(function () {
console.log("OK Moved!");
});
}).mouseup(function () {
$(this).unbind('mousemove');
}).mouseout(function () {
$(this).unbind('mousemove');
});
純粋なJavaScriptでは、これを次の方法で実現できます。
_function mouseMoveWhilstDown(target, whileMove) {
var endMove = function () {
window.removeEventListener('mousemove', whileMove);
window.removeEventListener('mouseup', endMove);
};
target.addEventListener('mousedown', function (event) {
event.stopPropagation(); // remove if you do want it to propagate ..
window.addEventListener('mousemove', whileMove);
window.addEventListener('mouseup', endMove);
});
}
_
次に、の線に沿って関数を使用します
_mouseMoveWhilstDown(
document.getElementById('move'),
function (event) { console.log(event); }
);
_
(nb:上記の例では、関数は必要ありません。mouseMoveWhilstDown(document.getElementById('move'), console.log)
として呼び出すこともできますが、コンソールに出力する以外に何かを実行したい場合があります!)