关闭画布上的窗口，JavaScript

我正试图想出解决这个问题的办法。 我需要检测鼠标点击红色小矩形来关闭窗口。 只有当“顶部”没有其他窗口时，单击的窗口才会关闭

我曾想过检测红色的点击，但效果并不好

另外，我不能使用弹出窗口，它们需要这样做

有人能帮我吗？ 谢谢

打开新窗口：
高度=，宽度=


关闭窗口






目前，有一些窗口处于打开状态

var A=0；
var i=0；
$（“详情1”）。正文（i）；
$（'input[type=radio]'）。单击（函数（e）{
var值=$（this.val（）；
如果（this.id=='open'）A=1；
如果（this.id=='close'）A=2；
});
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（“2d”）；
功能鼠标位置（画布、事件）{
const rect=canvas.getBoundingClientRect（）；
const x=数学层（event.clientX-rect.left）；
const y=数学层（event.clientY-rect.top）；
如果（A==1）打开（x，y）；
如果（A==2）关闭（）；
}
$（“#画布”）。单击（函数（e）{鼠标位置（画布，事件）；}）
功能打开（x，y）{
i++；
var width=$（“#txt_width”）.val（）；
var height=$（“#txt_height”）.val（）；
var new_x=x+（宽度-30）；
如果（！width.match（/^\d+$/）| |！height.match（/^\d+$/）警报（'仅限自然数！'）；
如果（高度<30）警报（'必须大于30！'）；
ctx.restore（）；
ctx.rect（x，y，宽度，高度）；
ctx.stroke（）；
ctx.save（）；
ctx.rect（x，y，宽度，30）；
ctx.fillStyle=“灰色”；
ctx.fillRect（x，y，宽度，30）；
ctx.font=“15px Arial”；
ctx.fillStyle=“黑色”；
ctx.fillText（“窗口编号”+i、x+10、y+20）；
ctx.stroke（）；
ctx.save（）；
ctx.rect（新的x，y，30，30）；
ctx.fillStyle=“红色”；
ctx.fillRect（新的x，y，30，30）；
ctx.font=“15px Arial”；
ctx.fillStyle=“黑色”；
ctx.fillText（“X”，新的X+10，y+20）；
ctx.stroke（）；
ctx.save（）；
$（“详情1”）。正文（i）；
$（“#详情2”）.text（'这些是：'）；
对于（var j=0；j

Windows GUI、焦点和树 我想说这很容易。无论你如何实现一个窗口系统，它都会变得非常复杂

像DOM这样的Windows GUI构建为一个树，例如桌面包含窗口，窗口包含标题栏，标题栏包含关闭图标

在下面的示例中，我实现了一个非常基本的树结构和各种类型的元素。由于所有元素都有很多相同的行为，并且我个人不会使用类语法（直到它被正确修复），所以元素是buildaddhock

行为

• 单击事件在根元素树中搜索单击的项目

• 项目通过顶部的聚焦窗口进行可视化排序

• 如果单击了一个窗口元素，但它不在焦点中，则该窗口将被聚焦

• 如果一个窗口元素被点击，并且它处于焦点位置，并且点击的项目是一个关闭按钮，那么该窗口将被关闭，并且下一个可视顺序将获得焦点

• 如果单击了最上面的项目（画布），将创建一个新窗口

• 最顶端的元素（根）称为

  desktopCanvas

  。正是通过此元素，您可以打开、关闭、聚焦和查询单击事件

通常，所有操作都会驱动事件队列，但在本例中，我没有实现这样的操作

所有项目都是从

CanvasElement

构建的，并且

CanvasElement

被分配了属性和方法，以实现树结构、基本渲染。传递希望元素成为的对象类型。例如

const element=new CanvasElement（新区域（0，0，this.w，30），菜单栏，未定义，名称）

创建类型为

MenuBar

的元素。您可以通过

cWindow.add（元素）

更多信息请参见示例

例子 单击画布以创建窗口。单击窗口以聚焦窗口。单击聚焦窗口上的“关闭”以关闭。只有当窗口具有焦点时，才能关闭窗口

const ctx=canvas.getContext（“2d”）；
const canBounds=canvas.getBoundingClientRect（）；
canvas.addEventListener（“单击”，mouseEvent）；
函数mouseEvent（事件）{
常数x=event.offsetX；
const y=event.offsetY；
const found=desktopCanvas.findClicked（x，y）；
如果（找到===desktopCanvas）{
常数wx=x-1）{
这个.子.拼接（idx，1）；
返回true；
}
用于（本节的常数c.儿童）{
如果（c）删除