0
170
ViewsIs there a way to change default action of a sensitive area in button?
I wrote a calculator App in React and generally, it's ok, but...
If I hold it longer I notice that the click is confirmed if click-down had been on the button and click-up have been on the button
I know that margin is not clickable, but in this App I can't use, for example, position
The point is that the button is animated and when click-up, cursor is not over the button. And I have a question that is there a way to prevent the whole problem in any way, so that it works the way it should?
Here's the link to the repo: https://github.com/FloweDewolf/calculator
Here's the link to the calculator: https://flowedewolf.github.io/calculator
And thanks for every help!
1 answers
Answer question0
One solution here would be to use a pseudo-element for the styling. This way the actual button bounds (red border) will stay in place. It also prevents writing additional logic to solve a styling issue.
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>