HTML: Any way to reduce the clickable area of a text in an onclick event?
Question
I'm making some buttons with the subtract and add symbols, I want the area where they can be clicked to be exactly the visible area of the symbol , but since I have the font size considerably large, the onclick event happens even in empty places that are near the symbols, I tried to reduce the line height and also tried to reduce the height and width of the div that contains the buttons but nothing works.
PS: Maybe I can fix this by using SVG instead of text , but would like to know first if there is a solution using text.
Example of what happens:
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>
See the red area that is clickable? That's exactly what I don't want, what I want to be clickable is just the green area of the symbols, like this:
2 answers
solution1
1 ACCPTED 2022-01-21 07:57:09
A hacky solution could work like this:
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>
solution2
0 2022-01-21 07:14:07
You can change the size in the button class. The font-size: Property.
.buttons {
font-size: 150px; // change it to 30px maybe
...
}
solution3
0 2022-01-21 07:14:22
I think you are overthinking it. Wrap it in div element with your own class, which specify the size in CSS. Of course you are clicking in reality on the div, not spans. I suppose + -... buttons should have same size, right?
divClass
{
width: 30px;
height: 30px
}
solution4
0 2022-01-21 07:18:24
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.