Goodness Gracious: What a Trudge!

The Event 'ontouchstart'
Prevents 'onclick' on iOS Devices

A rubbing his head after working hard for many hours
It's gonna be ok...

So the site had launched, and I asked some of my friends to test it. The ones who were on iOS devices had several things to say! There were some graphical glitches that were not too difficult to dispel. But the worst was the report about the button for muting the music being unresponsive.


I used Browser Stack to test it, and sure enough: sometimes, to engage the mute I had to press 2 or maybe even 3 times. Unacceptable! I added comments in the events, and could see that sometimes the ontouchstart event would get fired alone, and sometimes onclick would be there with it.

Normally, this wouldn't be a big deal... I could just shunt the ontouchstart into the onclick and be done with it. But here, I had the button overloaded, to act as the play button before music had been played... which requires the click event to qualify as 'user interaction'. Also, on touch I wanted a menu to pop out that was different than onclick.

The Solution



<!-- Instead of this -->

<div ontouchstart="OpenMenuFlag(this,true);" onclick="AudioButtonClickEv(this); "> Audio Demo </div>

<!-- I did This -->

<div onclick=" AudioButtonClickEv(this);if(event.pointerType !== 'mouse'){OpenMenuFlag(this,true);}"> Audio Demo </div>

Instead of detecting touch with the event ontouchstart, I checked if event.pointerType was 'mouse'. Then, I knew it was a click. This way, the onclick event was always fired. I hope this helped you, and saved you some time... because it was nearly painful for me.

A sunrise in the Alps, overlooking a valley, but higher than the clouds
How it felt to finally find a configuration that worked

Related Articles

Valentine Love
The Launch of GG Hire Me
Link Indexer Complete
I Made a Git Hub!
Media Indexer Complete
2023 : A Web App Retrospective
Media Indexer Update
Happy New Year 2024