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
        }
    });
});

jsフィドル

または、すべてを 1 つのオブジェクトとしてまとめる

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");
        }
    });
});

W/O リセット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 に答える