googlechrome-Javascript onmouseup事件未按预期启动

google chrome - Javascript onmouseup event not firing as expected

本文关键字：启动 onmouseup 事件 googlechrome-Javascript      更新时间：2023-09-26

我正在开发一个tilemap构造函数应用程序，该应用程序使用类似绘制的功能来选择一个tile（来自图像元素的src），并使用mouseup和mousedown事件处理程序进行绘制。

无论出于何种原因，mouseup事件都没有按预期触发。我已经读到，如果mousemove处于活动状态，mouseup将不会激发，并且我正在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上很快就试过了，它似乎很好用。任何关于造成这种情况的原因的见解都会有所帮助。

好的，所以我仍然不知道是什么导致了这种行为，但我能够将其隔离到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"/>';
        });

所以我的问题已经解决了，但我仍然有兴趣知道是什么导致了这种行为。如果你有任何想法，请发表评论。谢谢，

相关文章：