2

我正在玩一个简短的小代码，看看我是否可以在用户按下鼠标时启动一个功能，然后在他们抬起鼠标时结束它。对于这个例子，我试图增加我在屏幕上显示的数字，因为用户在按住按钮的同时移动鼠标。我希望它在释放按钮后冻结并停止，但是即使没有按下按钮，计数器也会重置并且计数从 0 继续...

function dragInit(state, e) {
    var i = 0;
    $(document).on("mousemove", function() {
        if (state) {
            i+=1;
            $('#debug').text(i); //Show the value in a div
        }
    });
}

$(document).ready(function() {

$(document).on(
    {mousedown: function(e) {
        var state = true;
        dragInit(e, state);
    },
    mouseup: function(e) {
        var state = false;
        dragInit(e, state);
    }
    });
});

顺便说一句，有没有办法可以在屏幕上显示变量是真还是假？当我尝试时，它只会说 [object Object]。

4

4 回答 4

3

您的代码中有很多错误。我建议您在开始使用 jQuery 之前阅读更多基本概念。

传递给的参数顺序在事件绑定和事件绑定dragInit()上都是错误的。mouseupmousedown

您的计数器重新启动的原因是因为您的变量i是本地变量，因此它仅在声明它的函数上下文期间存在。

您对状态变量犯了同样的错误，但在这种情况下，完全没有必要声明它。

考虑将您的计数器设为全局（即使这不是一个好习惯）。

我无法为您提供代码，因为我正在通过手机接听电话。一个解决方案是创建一个mousemove事件，在增加计数器之前检查鼠标按钮是否被按下。

希望我有所帮助

于 2013-04-19T04:38:54.330 回答
2

你可以这样做：

function dragInit() {
    $(document).on("mousemove", function () {
        if (eventState.state) {
            eventState.count += 1;
            $('#debug').text(eventState.count); //Show the value in a div
        }
    });
}

// Create an object to track event variables
var eventState = {
    count:0, //replaces your previous 'i' variable
    state: false //keeps track of mouseup or mousedown
};

$(document).ready(function () {

    $(document).on({
        mousedown: function (e) {
            eventState.state = true;
            dragInit(); //don't need to pass anything anymore
        },
        mouseup: function (e) {
            eventState.state = false;
            dragInit(); //don't need to pass anything anymore
        }
    });
});

jsFiddle

或者将所有东西放在一起作为一个对象

var dragInit = function () {
    var count = 0;
    var state = false;
    var action = function () {
        $(document).on("mousemove", function () {
            if (state) {
                count += 1;
                $('#debug').text(count); //Show the value in a div
            }
        })
    };

    $(document).on({
        mousedown: function (e) {
            state = true;
            action(); //don't need to pass anything anymore
        },
        mouseup: function (e) {
            state = false;
            action(); //don't need to pass anything anymore
        }
    });
}

$(document).ready(function () {
    var obj = new dragInit();
});

jsFiddle 2

回应评论的例子

jsFiddle：这说明了为什么以下代码片段在执行上有所不同。

// Works
$(document).on("mousemove", function () {
    if (state) {

    }
})

// Doesn't
if (state) {
    $(document).on("mousemove", function () {

    });
}
于 2013-04-19T04:32:20.973 回答
2

更少的代码，你只需要这个。

使用 jquery on 和Off打开和关闭 mousemove 事件。

计数器重置http://jsfiddle.net/kRtEk/

$(document).ready(function () {
    var i = 0;
    $(document).on({
        mousedown: function (e) {

            $(document).on("mousemove", function () {

                $('#debug').text(i++); //Show the value in a div
            });

        },
        mouseup: function (e) {
            i = 0;
            $('#debug').text(i);
            $(document).off("mousemove");
        }
    });
});

无重置http://jsfiddle.net/gumwj/

$(document).ready(function () {
    var i = 0;
    $(document).on({
        mousedown: function (e) {
             $(document).on("mousemove", function () {
                 $('#debug').text(i++); //Show the value in a div
            });

        },
        mouseup: function (e) {
            $(document).off("mousemove");
        }
    });
});

WithNoCounter http://jsfiddle.net/F3ESx/

$(document).ready(function () {

    $(document).on({
        mousedown: function (e) {
             $(document).on("mousemove", function () {
              $('#debug').data('idx',parseInt($('#debug').data('idx')|0)+1).text($('#debug').data('idx')); //Show the value in a div
            });

        },
        mouseup: function (e) {
            $(document).off("mousemove");
        }
    });
});
于 2013-04-19T04:38:21.033 回答
0

假设您已与 Jquery 结婚（这没有错） - 检查并考虑完全重新考虑您利用“.one()”（http://api.jquery.com/one/）方法的方法。

编辑：如果这种味道不适合 - 熟悉“延迟”对象（http://api.jquery.com/category/deferred-object/）

有很多方法可以通过 jquery 来解决这个问题——你最终决定什么取决于你真正打算用这个做什么。

于 2013-04-19T04:29:02.490 回答