如何用JS限制网站的可交互部分？

Question

以一个html canvas为例，它位于页面中间，宽度和高度都小于页面本身，所以有一个矩形canvas中间（由轮廓分隔）。

如何制作页面的这一部分，这个矩形中包含的区域，页面本身的可交互部分？

我有以下代码：

canvas.html

<html>
    <head>
        <meta charset="utf-8">
        <title>Graphs</title>
        <link rel="stylesheet" href="index.css">
        <script type="module" src="application.js"></script>
    </head>

    <body>
        <canvas id="appCanvas" style="border:1px solid #000000;">
        </canvas>
    </body>
</html>

index.css

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 60%;
    height: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

application.js

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

window.onresize = resize;
resize();

application.js 还包括对 mouseup 的检查，即在单击鼠标的位置绘制一个圆圈。

使用给定的代码，如前所述，中间有一个框，但是单击此框外仍会创建一个圆圈。圆圈仍然在盒子内部制作，只是投影在盒子内部。所以点击页面的左上角会在框的左上角添加一个圆圈，等等

我怎样才能做到只有在框中单击才会出现圆圈，也就是说，不会发生投影（即单击框的左上角会在框的左上角创建圆圈）？

Answer 1

如果直接在 canvas 上添加 onmouseup 事件处理程序，则只会注册 canvas 内的点击。

The mouseup event is fired at an Element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it. Element: mouseup event

否则你可以看看mouseup事件的目标。

document.body.onmouseup = (e) => {
  if(e.target.id === 'appCanvas'){
    console.log("clicked canvas with no projection"); 
  }
}

canvas {
  padding: 0;
  margin: auto;
  display: block;
  width: 60%;
  height: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Graphs</title>
  <link rel="stylesheet" href="index.css">
  <script type="module" src="application.js"></script>
</head>

<body>
  <canvas id="appCanvas" style="border:1px solid #000000;">
        </canvas>
</body>

</html>

如何用JS限制网站的可交互部分？

How to limit interactable section of website with JS?

html

javascript

css

canvas