Question

我正在使用一个tilemap构造函数应用程序，该应用程序使用类似绘画的功能来选择一个图块（来自图像元素的src）并使用clone()和mouseup事件处理程序对其进行绘制。 / p>

无论出于何种原因，mousedown事件未按预期触发。我已经读过，如果mouseup处于有效状态，mouseup将无法触发，我正在mousemove和preventDefault上运行mousemove功能。这似乎只有在我没有选择瓷砖时才有用。

这是我的事件处理函数：

mousedown

我的拼贴选择功能：

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

和我的绘画功能（由tile元素上的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

我认为这可能是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事件未按预期触发

1 个答案: