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事件没有按预期发射

回答

相关问题