Handling Touch Events on iOS Devices

Handling Touch Events on iOS Devices

On a recent project, I had to build an interface featuring some very nice icons used as navigation elements, which feature a simple but elegant rollover to reveal a caption (you can take a look here – click the “ENTER” button to view the interactivity.) But an issue occurs on iOS devices because when you have a linked element that changes either visibility or display properties on rollover (which is how my icons work – I have it set to animate in a separate div containing the caption on the onmouseover event), because of the tap functionality the user taps once to reveal the caption, then a second time to actually fire the click event. The client was concerned that a user would click once, see the caption reveal, and think “that’s it” – and quickly leave the page thinking “well that’s pointless” or something similar.

This is actually a good usability feature because it ensures that no information contained in a hover is hidden to touch device users. In general, it is a good idea to plan your UI design with an alternate to relying on hover events, but this was designed by a third party and it was my task to interpret and build.

So after a bit of Google searching, and as always trying to find the simplest solution to the problem, I decided to do a test for the navigator.platform javascript property.

I am using code from the correct answer posted to this stackoverflow question here.

If it DOES NOT return as iPad, iPhone or iPod, I use a jQuery function to execute the hover event, which retains it for all other devices but for iOS it simply does not fire. Then, I do test again this time if it DOES return iOS on click, quickly animate in the hover div then open the sliding panel. If it is NOT one of these devices, it operates as normal – the click event fires without animating in the hover div. (For the iOS devices, I attach the close of the div to the closing of the panel – I probably could have set a timeout on the original click event and then after a few seconds, removed it. But this was the quickest solution at the time). Here is the code I used:

var platform = navigator.platform.toLowerCase();
// List of iDevice platforms
var iDevices = {
"ipod": true,
"ipad": true,
"iphone": true
};

Then:

var hoverIcons = function(){
for(i=1; i <= 12; i++){
(function(e) {
var trigger = $("#iconTrig" + i);
var iconHoverState = $("#iconTrig" + i + " .iconHoverState");
if ( !(platform in iDevices) ) {
$(trigger).hover(function () {
$(iconHoverState).fadeIn('fast');
}, function () {
$(iconHoverState).fadeOut('fast');
});}
})(i);
}
};

And then the click event function:

var triggerPanels = function(){
for(i=1; i <= 9; i++){
(function(e) {
var trigger = $("#iconTrig" + i);
var panel = $("#pane" + i);
var iconHoverState = $("#iconTrig" + i + " .iconHoverState");
$(trigger).click(function(){

if ( (platform in iDevices) ) {
$(iconHoverState).fadeIn('fast');
$(panel).animate({
right: 0, opacity: 1
}, 500 );
} else {
$(panel).animate({
right: 0, opacity: 1
}, 500 );

}
return false;
});
})(i);
}
};

This seemed to be a down and dirty way to accomplish this, but it worked well; regular users will see the hover state as normal and click to open the panel divs. iPad, iPhone and iPod users will click once, which reveals the hover state quickly before opening the panel, meeting the client's request to have the interactivity attached to just one click.

Submit a Comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>