Javascript onmouseup事件沒有按預期發射

我正在使用類似畫圖功能的tilemap構造函數應用程序從圖像元素中選擇一個圖塊（src）並使用mouseup和mousedown事件處理程序對其進行繪製。Javascript onmouseup事件沒有按預期發射

無論出於何種原因，mouseup事件未按預期發射。我讀過mouseup將不會觸發，如果mousemove處於活動狀態，並且我正在mousemove和mousedown上運行preventDefault功能。這似乎只在我沒有選擇瓷磚時才起作用。

這裏是我的事件處理函數：

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上試了它，它似乎工作正常。任何有關導致這種情況的見解都會有所幫助。

來源

2016-07-30 o037

好了，所以我仍然不知道是什麼原因導致這種行爲，但我可以把它隔離到paintTile功能的第三行：

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

的東西在此行中我mouseup干擾事件被解僱。仍然不知道爲什麼。我能夠在調用包裝它像這樣補救行爲：

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

所以我的問題是解決了，但我仍然有興趣知道什麼可能會導致這種行爲。如果您有任何想法，請發表評論。謝謝，

來源

2016-07-31 18:54:52 o037

Javascript onmouseup事件沒有按預期發射

回答

相關問題