Напомним, JQuery в DOM

Question

Я хочу, чтобы иметь возможность щелкнуть по холсту, перенести его на карту, поместить его на карту. После удаления на карте они могут выбрать холст на карте и переместить его снова. Процесс повторяется. У меня есть проблема с переменной ignoreMouseMove, не сбрасывается в ложь и всегда верно

Вот ссылка на демо: 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; 
     }); 
    }); 
};