点击事件画布/ javascript

Question

大家好，我想让我的矩形可点击。 工作之后，我大声说，当我单击一个矩形时，它会在div中显示数据。 目前，画布div中的数据是手动的。 是否可以使用脚本执行我想做的事情，还是应该再次启动但完全不同？

for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) 
    {
        alert('Rectangle ' + i + ' clicked');
    }
}

这就是我所拥有的。 我不知道如何将警报更改为我想要的内容。

（对于整个html页面）

http://fiddle.jshell.net/f6rLds4g/

Answer 1

在DIV上设置innerHTML将起作用：

for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
        var container = document.createElement("span");
        span.innerHTML = 'Rectangle ' + i + ' clicked';
        document.getElementById("Display").appendChild(span);
    }
}