Tomemos, por ejemplo, un lienzo html que está centrado en el medio de la página con un ancho y una altura más pequeños que la página misma, por lo que hay un lienzo rectangular en el medio (seccionado por un contorno).
¿Cómo haría que esta sección de la página, el área contenida en este rectángulo, sea la parte interactuable de la página misma?
Tengo el siguiente código:
lienzo.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>índice.css
canvas { padding: 0; margin: auto; display: block; width: 60%; height: 80%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }aplicación.js
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.onresize = resize; resize();application.js también incluye una verificación de mouseup, que dibuja un círculo en el punto donde se hizo clic con el mouse.
Con el código dado, tengo como se mencionó, un cuadro en el medio, sin embargo, hacer clic fuera de este cuadro aún crea un círculo. El círculo todavía se hace dentro de la caja, solo se proyecta dentro de ella. Entonces, al hacer clic en la parte superior izquierda de la página, se agrega un círculo en la parte superior izquierda del cuadro, etc.
¿Cómo lo haría para que solo al hacer clic en el cuadro aparezcan los círculos, es decir, no se produzca ninguna proyección (es decir, al hacer clic en la parte superior izquierda del cuadro se crea un círculo en la parte superior izquierda del cuadro)?
Si agrega el controlador de eventos onmouseup directamente en el lienzo, solo se registrarán los clics dentro del lienzo.
El evento mouseup se activa en un elemento cuando se suelta un botón en un dispositivo señalador (como un mouse o un panel táctil) mientras el puntero se encuentra dentro de él. Elemento: evento mouseup
De lo contrario, podría mirar el objetivo del evento 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>