Javascript onmouseup Ereignis nicht wie erwartet ausgelöst

Question

Ich arbeite an einer Kachel-Konstruktor-App, die paint-ähnliche Funktionalität verwendet, um eine Kachel (src aus einem Bildelement) auszuwählen und mit mouseup und mousedown Event-Handler zu malen.

Aus welchem ​​Grund wird das Ereignis mouseup nicht wie erwartet ausgelöst. Ich habe gelesen, dass mouseup nicht ausgelöst wird, wenn mousemove aktiv ist, und ich die preventDefault Funktion auf mousemove und mousedown ausführen. Dies scheint nur zu funktionieren, wenn ich keine Kachel ausgewählt habe.

Hier Funktion meine Ereignishandler:

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

Meine Fliese Auswahlfunktionen:

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

und meine Malerei Funktion (durch einen onmouseover Ereignis auf den Fliesenelemente genannt):

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

Ich denke, dies kann ein Chrome-spezifisches Problem sein. Ich habe es auf Safari schnell ausprobiert und es schien gut zu funktionieren. Jeder Einblick in das, was dies verursacht, wäre hilfreich.

Answer 1

Okay, so habe ich noch keine Ahnung, was dieses Verhalten verursacht wurde, aber ich konnte es in der dritten Zeile der paintTile Funktion isolieren:

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

Etwas in dieser Linie mit meinem mouseup wurde stören Ereignis wird ausgelöst. Ich habe immer noch keine Ahnung warum. Ich war in der Lage, das Verhalten zu beheben, indem sie in einem requestAnimationFrame Aufruf wie so Einwickeln:

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

Also mein Problem gelöst ist, aber ich würde immer noch daran interessiert sein zu wissen, was diese Art von Verhalten verursachen könnte. Bitte kommentieren Sie, wenn Sie Ideen haben. Danke,