web-dev-qa-db-ja.com

mouseDownがjsを押している間にmousemoveを実装する方法

マウスダウンが押されたときにのみマウス移動イベントを実装する必要があります。

マウスを下に動かしてマウスを動かしたときにのみ「OK移動」を実行する必要があります。

私はこのコードを使用しました

 $(".floor").mousedown(function() {
  $(".floor").bind('mouseover',function(){
      alert("OK Moved!");
  });
})
.mouseup(function() {
 $(".floor").unbind('mouseover');
});
javascriptjquerymouseeventmousemovemousedown
9
M1M6

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');
});

https://jsfiddle.net/n4820hsh/

15
Tobías

純粋な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)として呼び出すこともできますが、コンソールに出力する以外に何かを実行したい場合があります！）

0
Algy Taylor