Elements not blurring on touchend

#1

I’m doing the calculator challenge and want to change the background image of a button when it is being clicked or tapped.

Using the :active css pseudoclass doesn’t work, so for mouse events I’m using the :focus class and blurring the buttons on mouseleave:

  keysContainer.on("mouseleave touchend", "button", function(e){
    // e.currentTarget.blur()
    this.blur();
  })

However, this does not work for touch events, even though the touchend event fires correctly.

The full code is here: https://codepen.io/pwkrz/pen/zRRObG

I would be grateful for any suggestions.

#2

Decimal point clears the screen.
The style you have made so far looks fine to me.

1 Like
#3

Thank you, I knew I forgot something :upside_down_face:

But the main issue is with the background image not changing.

#4

It changes from a raised button to an inset when I click a button. Looks fine to me.

#5

Appologies, I wasn’t clear.

The problem is that on mobile displays (issue also present in the chrome mobile emulator) the keys stay inset after tapping, instead of returing to raised position, even though each key is being blurred on touchend.

#6

I played around with your code a little bit and had a hard time fixing your problem. I can clearly see that mouseleave resets the button image, however touchleave does nothing.
I personally would try using event handlers on functions that change the button images. Instead of using CSS blur and focus, how about a touchstart event that changes the button image and a touchleave event that resets the image? If that doesn’t work you can always just use setTimeout for like a few hundred millisecs when you touch a button to reset the image. Even your click event isn’t currently perfect; ideally you would want the button to change only on mousedown, and reset on mouseup, just like a real life calculator.

2 Likes
#7

Thank you, will try your suggestion.

ps. I know the click handle isn’t perfect, but I kind of like the delay it creates :slight_smile:

#8

…and by “touchleave” I meant touchend.

#9

Changing the button backgrounds via js (plus a timeout after mouseup/touchend) did the trick: https://codepen.io/pwkrz/full/zRRObG/

Thank you!

1 Like
#10

If you change the following event handler from “click” to “mousedown” and add “touchstart”, then even if the user holds the button down a little longer than a normal click, it will still achieve the effect.

keysContainer.on("click", "button", function() {

Also, I would add “mouseleave” to the event handler which calls raiseButton(this), because without it, if someone clicks down and drags the mouse accidentally over to another button, the first button where the click happened, will stay in the pressed position.

1 Like
#11

Great, glad you solved it! Cheers

1 Like
#12

Added your suggestions. Thank you!

#13

Update - I removed the touch events, because they seem to duplicate mousedown and mouseup (at least in chrome emulator and my samsung s6)

#14