Goodness Gracious: What a Trudge!

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

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.

Diagnosis

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

(event.pointerType)

HTML

<!-- 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.