Question

我打onmousedown时遇到问题。

我有一个网页（HTML），我要在其中注释几张图像（这是关于在图像上创建垃圾标签）。我制作了一个带有 next 和 previous 按钮的滑块，用于从一个图像转到另一个图像。

它看起来像这样：

此图片是第一张索引0（可以在控制台上看到）。通过单击左侧菜单中的类，将矩形添加到“画布”中。每个图像都有其“画布”（我们注意到“画布”也是索引0，因此它是图像的“画布”）。

为了移动矩形，我使用onmousedown / onmouseup，它可以正常工作，在第一张图片上一切正常。

但是在第二个及以后的版本中，它不起作用。

单击 next 按钮（在屏幕快照中被控制台隐藏）之后。我们看到图像和画布已更改，索引为1，先前的矩形已在该画布上重绘（根据需要），但是当我单击矩形以移动它时，我不能，我也不会甚至没有console.log的最近点击次数，就像上一个屏幕截图一样。单击但没有任何反应，该函数未调用。我将onclick = alert (id)直接放在HTML canvas标记中以查看它是否有效，是的，它有效。单击“画布”时，我会在正确的时间以正确的ID发出警报。

因此，我可以在第一个图像的第一个画布上添加和移动（onmousedown，onmouseup）矩形，我可以使用“下一个”按钮传递到下一个图像及其“画布”，即“重绘”矩形。上一个图像已完成，但是当我单击“画布”时没有任何反应，该函数的调用未完成，否则我将在控制台中拥有日志。

有什么主意吗？

这是来自不同部分的一些代码。

HTML：

<div class="containerCaptures">
    {% for capture in captureSelectionOfTagSession %}
        <div class="jsoda-workspace">
            <canvas class="jsoda-canvas"></canvas>
            <img src="{{ capture.image.url }}" alt="{{ capture.name }} class="jsoda-image" id="{{ capture.id }}">
        </div>
    {% empty %}
        <div>
            <p>Aucune image.</p>
        </div>
    {% endfor %}
</div>

图像的JavaScript滑块：

var currentIndex = 0,
items = $('.containerCaptures div'),
itemAmt = items.length;

function displayFirstImg(){
    var firsItem = $('.containerCaptures div').eq(currentIndex);
    firsItem.css('display','inline-block');
    loadImage();
}

function cycleItems() {
    var item = $('.containerCaptures div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
    loadImage();
}

$('#btNext').click(function() {
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
    }
    cycleItems();
});

$('#btPrev').click(function() {
    currentIndex -= 1;
    if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
    }
    cycleItems();
});

并在另一个JavaScript文件中：

function loadImageOnStart() {
    image = document.getElementsByClassName("jsoda-image")[currentIndex];
    console.log("ici loadImage");

    console.log(currentIndex);

    var jsodaCanvas = document.getElementsByClassName("jsoda-canvas")[currentIndex];
    jsodaCanvas.width = image.width;
    jsodaCanvas.height = image.height;
    console.log("ici loadImageCanvas");
    console.log(currentIndex);

    mousedown = false;
    x1 = -1;
    y1 = -1;
    x2 = -1;
    y2 = -1;

    redraw();
}

document.getElementsByClassName("jsoda-canvas")[currentIndex].onmousedown = function(e) {
    console.log("onmousedown");
    console.log(currentIndex);
    mousedown = true;
    clickedArea = findCurrentArea(e.offsetX, e.offsetY);
    if (clickedArea.box != -1) {
        for (var i = 0; i < boxes.length; i++) {
             boxes[i].selected = false;
        }
        boxes[clickedArea.box].selected = true;
    } else {
        for (var i = 0; i < boxes.length; i++) {
            boxes[i].selected = false;
        }
    }
    x1 = e.offsetX;
    y1 = e.offsetY;
    x2 = e.offsetX;
    y2 = e.offsetY;
    redraw();
};

那只是整个代码的一部分，代码很长...

请随时询问您是否需要更多信息。

未调用Javascript鼠标单击（向下/向上）

0 个答案: