13

onmousemoveたとえば、ある条件で、マウスが下がったときにイベントをキャンセルしたい。onmousemoveイベントの方向を決定することは可能ですか？jQまたはJSはOKです。

ドラッグアンドドロップ要素があります。ユーザーが要素を上にドラッグします。たとえば、要素の下部がドキュメント内のある位置に到達した場合（つまり、ドキュメント500pxの上部から）、onmousemove停止します。また、ユーザーが要素をもう一度上にドラッグしようとすると、関数は開始されません。この要素では、下にドラッグすることしかできません。mousemoveですから、イベントの方向性を捉えれば、なかなか簡単にできると思いました。しかし、そのような標準的なプロパティはないようです。

4

3 に答える 3

28

最後のイベントの位置を保存しmousemoveて、現在の位置と比較できます。

//setup a variable to store our last position
var last_position = {},
$output       = $('#output');

//note that `.on()` is new in jQuery 1.7 and is the same as `.bind()` in this case
$(document).on('mousemove', function (event) {

    //check to make sure there is data to compare against
    if (typeof(last_position.x) != 'undefined') {

        //get the change from last position to this position
        var deltaX = last_position.x - event.clientX,
            deltaY = last_position.y - event.clientY;

        //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero
        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
            //left
        } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
            //right
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
            //up
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
            //down
        }
    }

    //set the new last position to the current for next time
    last_position = {
        x : event.clientX,
        y : event.clientY
    };
});

これがデモです：http：//jsfiddle.net/Dv29e/

アップデート

mousemoveイベントを調整して、マウスがどこに移動したかをより一般的に把握することもできます。

var last_position = {},
    $output       = $('#output'),
    mousemove_ok  = true,
    mouse_timer   = setInterval(function () {
        mousemove_ok = true;
    }, 500);
$(document).on('mousemove', function (event) {
    if (mousemove_ok) {
        mousemove_ok = false;
        ...
    }
});

これは、次の場合にのみ、カーソルの位置を過去の位置と照合します。

  1. 最後の位置が存在します。
  2. mousemove_ok変数は、0.5秒ごとに実行されるように設定されますtrue。

これが抑制されたデモです：http：//jsfiddle.net/Dv29e/4/

于 2012-01-28T18:21:25.847 に答える
7

以前のマウス移動イベントに関連するデルタを示す標準プロパティがあります。

document.addEventListener('mousemove', function (event) {
  directionX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
  directionY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
});

ドキュメントで述べたように：

MouseEvent.movementX読み取り専用プロパティは、そのイベントと前のmousemoveイベントの間でマウスポインタのX座標をシフトします。

于 2016-07-31T07:48:15.477 に答える
0

event.movementXは、前のpositionXとのpxの差です。たとえば、100 pxの右移動の場合は100、左移動の場合は-100など、移動なしの場合は0です。

于 2017-08-29T07:08:45.367 に答える