Плитка не всегда нажимается с первого раза

Question

У меня есть изометрическая карта с выбираемыми плитками. Где плитки становятся «подсвеченными», когда на них нажимают, и возвращаются в нормальное состояние, когда щелкают по другой плитке. Это делается путем изменения фонового изображения на один из выделенных плиток.

Однако я заметил, что плитки не всегда распознают, что они были нажаты при первом нажатии. Например, при первом запуске нажатие на плитку, ближайшую к экрану, обычно ничего не делает. Если щелкнуть по нему еще раз или даже три раза, он, наконец, изменит цвет, но это требование множественного щелчка все еще присутствует при попытке использовать другой тайл. В конце концов плитки будут меняться после одного щелчка, ИЛИ, если удерживать нажатой кнопку мыши на плитке в течение секунды до отпускания.

В приведенном ниже примере вы можете увидеть мой обработчик события щелчка плитки. Просто найдите «TODO» в коде JS. Проблема, вероятно, из-за двух событий щелчка плитки. Можно ли решить эту проблему?

http://jsfiddle.net/briz/jdhPW/8/

Я рекомендую вам проверить, нажав на первый ряд плиток. У плиток есть прозрачные пиксели вокруг них, поэтому легко думать, что вы щелкаете плитку в середине, когда мышь все еще регистрирует плитку вокруг нее. Вы можете видеть, какая плитка в данный момент «активна», когда она становится слегка прозрачной, когда наведена.

РЕДАКТИРОВАТЬ Я нашел решение! Я могу заранее зарегистрировать плитки, назвав их так:

$.fn.gameMap.tileInfo = function(tile,x,y) 
    {
        // Registers each tile with their unique id
        tile.id = obj.attr('id') + '_tile_' + x + '_' + y;

        // When the tile gets clicked
        tile.click(function() 
        {
                        .....
        }

Тогда существует только один экземпляр события щелчка, и он срабатывает при первом щелчке каждый раз

Answer 1

Я немного очистил код, используя больше jQuery, чем в вашем оригинале.

$.fn.gameMap.tileInfo = function(tile,x,y) {
    // When the tile gets clicked
    tile.click(function() {
        // When the tile gets clicked again?
        var regularTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesWatermark.png)";
        $(".content .tile").css("background-image", regularTile);
        // Makes the tile apparently selected
        var selectedTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesSelected.png)";
        tile.css("background-image", selectedTile);
    });
};

Еще лучше было бы просто добавить событие click к плиткам, подобным этому, поскольку оно связывает их все сразу (хотя вам придется немного реструктурировать свой код ...):

var tiles = $(".content .tile").click(function() {
    // When the tile gets clicked again?
    var regularTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesWatermark.png)";
    tiles.css("background-image", regularTile);
    // Makes the tile apparently selected
    var selectedTile = "url(http://i244.photobucket.com/albums/gg10/brizthewhitedragon/WorkTilesSelected.png)";
    tile.css("background-image", selectedTile);
});