我正在开发一个tilemap构造函数应用程序,它使用类似绘画的功能来选择一个图 block (来自图像元素的src)并使用mouseup
和mousedown
来绘制它事件处理程序。
无论出于何种原因,mouseup
事件都没有按预期触发。我读到,如果 mousemove
处于事件状态,mouseup
将不会触发,并且我正在 mousemove
上运行 preventDefault
函数> 和 mousedown
。这似乎仅在我没有选择图 block 时才有效。
这是我的事件处理函数:
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;
});
}
我的图 block 选择功能:
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});
}
和我的绘画函数(由图 block 元素上的 onmouseover
事件调用):
function paintTile(element) {
if (window.mouseDown && window.selectedTile) {
element.innerHTML = '<img src="' + window.selectedTile.image + '" class="tilemap-tile"/>';
}
}
我认为这可能是 Chrome 特有的问题。我很快就在 Safari 上尝试了一下,看起来效果很好。任何有关导致此问题的原因的见解都会有所帮助。
最佳答案
好吧,我仍然不知道是什么导致了这种行为,但我能够将其隔离到 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"/>';
});
所以我的问题已经解决了,但我仍然有兴趣知道什么可能导致这种行为。如果您有什么想法请评论。谢谢,
关于Javascript onmouseup 事件未按预期触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38670598/