0
264
ViewsHTML: ¿Alguna forma de reducir el área en la que se puede hacer clic de un texto en un evento onclick?
Estoy haciendo algunos botones con los símbolos de restar y sumar, quiero que el área donde se puede hacer clic sea exactamente el área visible del símbolo , pero como tengo el tamaño de fuente considerablemente grande, el evento onclick ocurre incluso en lugares vacíos que están cerca de los símbolos, traté de reducir la altura de la línea y también traté de reducir la altura y el ancho del div que contiene los botones, pero nada funciona.
PD: Tal vez pueda arreglar esto usando SVG en lugar de texto , pero me gustaría saber primero si hay una solución usando texto.
Ejemplo de lo que sucede:
var counter = document.getElementById("counter") counter = 1; function subtract() { counter -= 1; if (counter <= 0) { counter = 0; } document.getElementById("counter").innerHTML = counter; } function add() { counter += 1; if (counter >= 10) { counter = 10; } document.getElementById("counter").innerHTML = counter; } @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { user-select: none; margin: 0; padding: 0; } body { background-color: #1B5389; color: #e6e6e6; font-family: 'Poppins', Arial, Helvetica, sans-serif; } #counter { display: flex; align-items: center; justify-content: center; font-size: 160px; font-weight: 600; } .buttons { font-size: 150px; display: flex; align-items: center; justify-content: center; position: absolute; top: 130px; left: 0; right: 0; } .buttons span { margin: 0 10px; cursor: pointer; background-color: #50fa785b; /* To show the whole area that is clickable */ } <body> <div id="counter">1</div> <div class="buttons"> <span onclick="subtract()" class="del">-</span> <span onclick="add()" class="add">+</span> </div> </body>¿Ves el área roja en la que se puede hacer clic? Eso es exactamente lo que no quiero, lo que quiero que se pueda hacer clic es solo el área verde de los símbolos, así:
·
Juan Pablo Isaza
2 answers
Answer question0
Una solución hacky podría funcionar así:
let counter = 1; function subtract() { counter -= 1; if (counter <= 0) { counter = 0; } document.getElementById("counter").textContent = counter; } function add() { counter += 1; if (counter >= 10) { counter = 10; } document.getElementById("counter").textContent = counter; } @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { user-select: none; margin: 0; padding: 0; } body { background-color: #1B5389; color: #e6e6e6; font-family: 'Poppins', Arial, Helvetica, sans-serif; } .counter-container { display: grid; font-size: 150px; place-content: center; place-items: center; margin-top: 130px; column-gap: 10px; grid-template-areas: "counter counter" "minus plus"; grid-template-rows: auto 50px; margin: 0 auto; width: 170px; } .counter-container span { cursor: pointer; background-color: #50fa785b; position: relative; overflow: hidden; height: 80px; width: 80px; } .counter-container span::after { right: 0; position: absolute; top: -70px; } #counter { grid-area: counter; }; .del { grid-area: minus; } .add { grid-area: plus; } .del::after { content: "-"; left: 0; } .add::after { content: "+"; left: -11px; } <div class="counter-container"> <div id="counter">1</div> <span onclick="subtract()" class="del"></span> <span onclick="add()" class="add"></span> </div>
·
Juan Pablo Isaza
Report
0
var counter = document.getElementById("counter") counter = 1; function subtract() { counter -= 1; if (counter <= 0) { counter = 0; } document.getElementById("counter").innerHTML = counter; } function add() { counter += 1; if (counter >= 10) { counter = 10; } document.getElementById("counter").innerHTML = counter; } @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { user-select: none; margin: 0; padding: 0; } body { background-color: #1B5389; color: #e6e6e6; font-family: 'Poppins', Arial, Helvetica, sans-serif; } #counter { display: flex; align-items: center; justify-content: center; font-size: 160px; font-weight: 600; } .buttons { font-size: 150px; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 130px; left: 0; right: 0; } .buttons span { margin: 0 10px; cursor: pointer; background-color: #50fa785b; /* To show the whole area that is clickable */ } <body> <div id="counter">1</div> <div class="buttons"> <span onclick="subtract()" class="del">-</span> <span onclick="add()" class="add">+</span> </div> </body>
·
Juan Pablo Isaza
Report
Answer question