检测鼠标左右移动，无移动 [英] Detecting both left and right mouse movement and no movement

问题描述

我正在尝试检测此（修改过的） jQuery插件中的三种鼠标移动状态 - 左，右和停止（鼠标不移动）：

I'm trying to detect three mouse movement states in this (modified) jQuery plugin – left, right and stop (mouse not moving):

(function ($) {
    var options = {};
    var oldx = 0;
    var direction = "";
    $.mousedirection = function (opts) {
        var defaults = {};
        options = $.extend(defaults, opts);
        $(document).bind("mousemove", function (e) {
            var activeElement = e.target || e.srcElement;
            if (e.pageX == oldx) {
                direction = "stop";
            } else if (e.pageX > oldx) {
                direction = "right";
            } else if (e.pageX < oldx) {
                direction = "left";
            }
            $(activeElement).trigger(direction);
            $(activeElement).trigger({
                type: "mousedirection",
                direction: direction
            });
            oldx = e.pageX;
        });
    }
})(jQuery)

$(function () {
    $.mousedirection();
    $(".container").bind("mousedirection", function (e) {
        $(this).html("Mouse Direction: <b>" + e.direction + "</b>");
    });
});

但它没有按预期工作。我相信在 mousemove 函数中触发后续检查之间应该有一些最小的延迟，但我不确定如何实现它。

But it doesn't work as expected. I believe there should be some kind of minimal delay between firing of subsequent checks in mousemove function but I'm not sure how to implement it.

http://jsfiddle.net/fallenartist/7pBE7/1/ - 大部分处于'停止'状态，未正确检测'左'和'右'鼠标移动

http://jsfiddle.net/fallenartist/7pBE7/1/ - mostly in 'stop' state, not detecting properly 'left' and 'right' mouse movement

万分感谢。

推荐答案

根据Pedro的解决方案，这回答了我的问题：

As per Pedro's solution above, this answers my question:

(function ($) {
    var options = {};
    var oldx = 0;
    var direction = "";
    var stop_timeout = false;
    var stop_check_time = 150;
    $.mousedirection = function (opts) {
        var defaults = {};
        options = $.extend(defaults, opts);
        $(document).bind("mousemove", function (e) {
            var activeElement = e.target || e.srcElement;
            if (e.pageX > oldx) {
                direction = "right";
            } else if (e.pageX < oldx) {
                direction = "left";
            }

            clearTimeout(stop_timeout);
            stop_timeout = setTimeout(function () {
                direction = "stop";
                $(activeElement).trigger(direction);
                $(activeElement).trigger({
                    type: "mousedirection",
                    direction: direction
                });
            }, stop_check_time);

            $(activeElement).trigger(direction);
            $(activeElement).trigger({
                type: "mousedirection",
                direction: direction
            });
            oldx = e.pageX;
        });
    }
})(jQuery)

$(function () {
    $.mousedirection();
    $(".container").bind("mousedirection", function (e) {
        $(this).html("Mouse Direction: <b>" + e.direction + "</b>");
    });
});

http://jsfiddle.net/fallenartist/7pBE7/5/

这篇关于检测鼠标左右移动，无移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！