0
167
Vistas¿Hay alguna forma de cambiar la acción predeterminada de un área sensible en el botón?
Escribí una aplicación de calculadora en React y, en general, está bien, pero...
Si lo mantengo más tiempo, noto que el clic se confirma si el clic hacia abajo se hizo en el botón y el clic hacia arriba se hizo en el botón.
Sé que no se puede hacer clic en el margen, pero en esta aplicación no puedo usar, por ejemplo, la posición
El punto es que el botón está animado y cuando se hace clic, el cursor no está sobre el botón. Y tengo una pregunta, ¿hay alguna manera de prevenir todo el problema de alguna manera, para que funcione como debería?
Aquí está el enlace al repositorio: https://github.com/FloweDewolf/calculator
Aquí está el enlace a la calculadora: https://flowedewolf.github.io/calculator
Y gracias por cada ayuda!
1 Respuestas
Responde la pregunta0
Una solución aquí sería usar un pseudo-elemento para el estilo. De esta manera, los límites reales del botón (borde rojo) permanecerán en su lugar. También evita escribir lógica adicional para resolver un problema de estilo.
let count = 0; function handleClick() { document.getElementById('counter').innerHTML = ++count; } button { position: relative; background: transparent; width: 5rem; height: 5rem; border: 1px solid red; z-index: 1; } button::before { position: absolute; content: ' '; left: 0; top: 0; height: 4rem; width: 4rem; background: #ff9999; z-index: -1; } button:active::before { left: 1rem; top: 1rem; } <button type="button" onclick="handleClick()">Add 1</button> <p>current count: <span id="counter">0</span></p>