1

我正在使用以下脚本来检测元素上的鼠标向左或向右移动。

它效果很好，并且根据方向，我触发图像滑块向左或向右滑动。我在弄清楚如何向其中添加另一个变量时遇到问题。我只希望事件在 X 像素之后触发。因此，如果鼠标向左移动 200 像素，则该事件将触发。

这是我当前设置的一个小提琴。http://jsfiddle.net/wMMrh/1/

我试过添加if (i++ > 200) { //do something }到mousemovement，但这对我没有帮助。

(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();
        $(".iosSlider").bind("mousedirection", function (e) {

            if (!$(".iosSlider").hasClass("moving")) {

            if (e.direction == "left")
                $(".iosSlider").iosSlider('nextSlide');
            else
                $(".iosSlider").iosSlider('prevSlide');
            }

        });
    });
4

1 回答 1

1 
var oldx = null; // note, not equal to 0, since 0 is a valid mouse position
// ...
       $(document).bind("mousemove", function (e) {
            var activeElement = e.target || e.srcElement;

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

            if (oldx) {
                var max = +oldx + 200;
                var min = +oldx - 200;
                console.log("e.pageX = " + e.pageX + ", max = " + max + ", min = " + min);
                if (e.pageX > max) {
                    direction = "right";
                } else if (e.pageX < min) {
                    direction = "left";
                } else {
                    return;
                }
            } else {
                console.log("setting oldx to " + e.pageX);
                oldx = +e.pageX;
                return;
            }
            console.log("survived. e.pageX = " + e.pageX);

            // Not sure if you want both triggers here, but I'll assume you do
            $(activeElement).trigger(direction);
            $(activeElement).trigger({
                type: "mousedirection",
                direction: direction
            });
            // changing this to null so my code above will trigger properly next time
            oldx = null;
        });

你很亲密，但需要做几件事。

首先，我设置oldx为null，因为 0 可以是有效的鼠标位置。在底部，您设置oldx为e.pageX，我将其设置回null。

接下来，我设置了一个最大和最小变量来检查您的阈值。注意+oldx, 以确保变量被视为数字而不是字符串（因为“2”+ 200 = 2200 而不是 202）。

我添加了许多控制台消息来显示发生了什么。我仍在研究为什么计时器会导致“正确”而不是顶部。

这是最新的小提琴更新。

于 2013-08-06T14:46:14.813 回答