Javascript onmouseup событие не работает, как ожидалось

Question

Я работаю над конструктором tilemap-приложения, в котором используется краска-подобная функциональность, чтобы выбрать фрагмент (src из элемента изображения) и нарисовать его с помощью обработчиков событий mouseup и mousedown.

По каким-либо причинам событие mouseup не работает как ожидается. Я читал, что mouseup не срабатывает, если активен mousemove, и я запускаю функцию preventDefault на mousemove и mousedown. Кажется, это работает только тогда, когда у меня нет выбранной плитки.

Вот моя функция обработчика событий:

function setTilemapMouseEvents() { 
    var tilemap = document.getElementById('tilemap'); 

    tilemap.addEventListener('mousedown', function(e) { 
     window.mouseDown = true; 
     e.preventDefault(); 
    }); 

    tilemap.addEventListener('mousemove', function(e) { 
     e.preventDefault(); 
    }); 

    window.addEventListener('mouseup', function() { 
     window.mouseDown = false; 
    }); 
} 

Моя плитка Выбор функций:

function TilesetTile(options) { 
    this.image = options.image; 
    this.symbol = options.symbol; 
} 

function selectTile(element) { 
    var selectedTile = document.getElementsByClassName('selected')[0]; 
    if (selectedTile !== undefined) { 
     selectedTile.classList = 'tileset-tile'; 
    } 
    element.classList += ' selected'; 
    window.selectedTile = new TilesetTile({image: element.src}); 
} 

и моя картина функция (вызывается в onmouseover случае на элементах плитки):

function paintTile(element) { 
    if (window.mouseDown && window.selectedTile) { 
     element.innerHTML = '<img src="' + window.selectedTile.image + '" class="tilemap-tile"/>'; 
    } 
} 

Я думаю, что это может быть проблема Chrome. Я пробовал это на Сафари очень быстро, и, похоже, он работал нормально. Любое понимание того, что вызывает это, было бы полезно.

Answer 1

Хорошо, так что я до сих пор понятия не имею, что вызывает такое поведение, но я был в состоянии изолировать его на третьей строке paintTile функции:

element.innerHTML = '<img src="' + window.selectedTile.image + '" class="tilemap-tile"/>'; 

Что-то в этой линии мешая мой mouseup событие уволено. Все еще не знаю, почему. Я был в состоянии исправить поведение, обернув его в requestAnimationFrame вызова следующим образом:

window.requestAnimationFrame(function() { 
      element.innerHTML = '<img src="' + window.selectedTile.image + '" class="tilemap-tile"/>'; 
     }); 

Так что мой вопрос решается, но я все равно будет интересно узнать, что может привести к такому поведению. Прокомментируйте, если у вас есть идеи. Спасибо,