I’m starting to feel behind the curve. I started receiving feedback that some
clickable elements on my social networks were not working on touch devices.
Without much thought, I went ahead and added touchstart along side of click
to bind both events:
$(document).on('click touchstart', '.feeny', function(e) {
alert('Believe in yourselves. Dream. Try. Do good.'
“Problem solved!”, I thought. This resolved the issue with form submit buttons
but not hearts. Hearts persist on the page when clicked. Things worked fine on
the desktop but tapping a heart on your phone would fire both click and
touchstart events. This would heart and immediately unheart the item.
I then did some research and polled my friends to see how they would do it. My
buddy Khary suggested sniffing the browser for touch capabilities and
setting the event handler accordingly. The interwebs corroborated this and I
proceeded to use a variable for the event:
var clickEvent = (function() {
if ('ontouchstart' in document.documentElement === true)
return 'touchstart'
else
return 'click'
})();
Worked great on my desktop and Android phone. Even worked on iOS which was the
platform that was double firing. Code went live. NEXT PROJECT!
Over the next two weeks I noticed the occasional “complaint status” about some
click events not working. Nothing formal was reported so I assumed these were
edge cases and did not action on them. I continued to research and eventually a
formal bug report came in.
I learned about a third device I was not considering, the touchscreen laptop.
It’s a hybrid device that supports both touch and click events. Binding one
event means only that event be supported. Does that mean someone with a
touchscreen and mouse would have to explicitly touch because that’s the only
event I am handling?
Binding touchstart and click seemed ideal to handle these hybrid devices.
To keep the event from firing twice, I added e.stopPropagation() and
e.preventDefault() to the callback functions. e.stopPropagation() stops
events from “bubbling up” to their parents but also keeps a second event from
firing. I included e.preventDefault() as a “just in case” but seems like it
could be omitted.
The code’s been live for a few days but I was only able to confirm that things
are working on my devices. Until I can track down a user with a touchscreen
laptop I won’t know for sure. Fortunately I have already seen a “praise status”
about the problem “fixing itself” so the solution may be a hit.
