Javascript onmouseup 事件没有按预期触发

Question

我正在开发一个 tilemap 构造器应用程序，它使用类似绘画的功能来 select 一个图块（来自图像元素的 src）并使用 mouseup 和 mousedown 绘制它事件处理程序。

无论出于何种原因，mouseup 事件未按预期触发。我读到如果 mousemove 处于活动状态，mouseup 将不会触发，我是运行 mousemove 和 mousedown 上的 preventDefault 函数。这似乎只有在我没有磁贴时才有效 selected.

这是我的事件处理函数：

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;
    });
}

我的磁贴 select 功能：

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 函数的第三行：

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

Javascript onmouseup event not firing as expected

javascript

google-chrome

dom-events