Javascriptのonmouseupイベントが予期したとおりに実行されない

Question

タイル（画像要素からの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固有の問題だと思います。本当に早くSafariで試してみましたが、うまく動作していたようです。これを引き起こしていることについての洞察は役に立ちます。

Answer 1

わかりましたので、私はまだ、この動作を引き起こしていたものは考えているが、私はpaintTile機能の3行目にそれを隔離することができました：この行の

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

何かが私のmouseupに干渉しましたイベントが発生しました。それでも理由は分かりません。

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

だから私の問題が解決されていますが、私はまだこの動作の種類を引き起こす可能性があるものを知ることに興味がある：私はそうのような​​コールでそれをラップすることにより、行動を改善することができました。アイデアがあればコメントしてください。ありがとう、