Question

我希望能够点击画布，将其移动到地图上，然后将其放在地图上。将其放在地图上后，他们可以在地图上选择画布并再次移动它。重复该过程。我在使用ignoreMouseMove变量时遇到问题，它不会重置为false并始终为true

以下是演示的链接：https://pokemon-map-electro2k.c9users.io/index.html

var moveCanvas = function ($canvas, e) {
    $(".map ul li." + $canvas).offset({
        left: e.pageX - 30,
        top: e.pageY - 30
    });
};

// When user first click on canvas
var onmousemove = function ($canvas) {

    var ignoreMouseMove = false;

    // Make canvas follow cursor in the map area
    $(".map").mousemove(function (e) {
        if (ignoreMouseMove) return;    // event handling mousemove is "disabled"
        moveCanvas($canvas, e);
    }).click(function () {
        // "re-enable" mousemove
        ignoreMouseMove = true;

        // When canvas is click on again within the map area, make canvas follow cursor
        $(".map ul li").click(function () {
            $(".map").mousemove(function (e) {
                if (!ignoreMouseMove) return;
                moveCanvas($canvas, e);
            }).click(function () {
                // Click function does not work anymore. ignoreMouseMove can't be reset. It is always true
                ignoreMouseMove = false; 
            })
        });

    });

};

Answer 1

不使用.off()，而是使用一个布尔变量来指示是否要忽略mousemove事件，而是保留mousemove事件处理程序：

var onmousemove = function ($canvas) {
    var ignoreMouseMove = false;
    // Make canvas follow cursor in the map area
    $(".map").mousemove(function (e) {
        if (ignoreMouseMove) return; // event handling is "disabled"
        $(".map ul li." + $canvas).offset({
            left: e.pageX,
            top: e.pageY
        });
    }).click(function () {
        ignoreMouseMove = true;
        $(".map ul li").click(function () {
            // "re-enable" mousemove
            ignoreMouseMove = false;
       });
    });
};

在DOM中调用Jquery

1 个答案: