Question

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

效果很好，根据方向，我会触发图像滑块向左或向右滑动。我在解决如何为此添加另一个变量时遇到了问题。我只想在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');
            }

        });
    });

Answer 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。

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

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

Here是最新的小提琴更新。

鼠标移动200像素后的火灾事件

1 个答案: