jQuery onMouseover/onClick for Touchscreen users (ie iPad)

Question

So, I've made a collapsible menu into a web site based system which minimised the menu into 6 "jewel buttons" on the top right of the screen, each looks the same and contains a number, which is the number of alerts referring to items within the menu.

The content of these is not really relevant to my question, but simply explains that they are not therefore textual and don't therefore have clear and easy to read labels explaining what the menu items do.

Therefore, I have put an onMouseover tool tip which displays a hidden div explaining what each menu item is.

There is also an onClick event where jQuery slides the menu into view.

This is a private Intranet system, I wouldn't use these menus on a public website as it's not clear enough, but given that this is the application, my problem is:

When viewed on an iPad for example (and presumably other touchscreen devices), the onMouseover gets handled as an onClick so therefore, 'clicking' the button just shows the tooltip and not the menu as required.

What's the advice on handling this?

I have seen this thread Detect iPad users using jQuery? so, given that it's a private web application I could detect iPad users and re-construct the jQuery to ignore the onMouseover command for iPad users, but if I were to expand a similar application to something that may have more users, what would be the way to handle these two events?

Solution

if ("ontouchstart" in window || "ontouch" in window) {
    // bind the relevant functions to the 'touch'-based events for iOS
}
else {
    // use the classic mouse-events, 'mouseover,' 'click' and so on.
}

I've tested this with the following simple demo, albeit without event-binding (as yet) in the full-screen JS Fiddle demo (I've also made a TinyUrl to redirect to that demo, for ease of entry in the iOS devices: tinyurl.com/drtjstest2/).

Revised demo, with event-allocated functions:

var body = document.getElementsByTagName('body')[0];

if ("ontouchstart" in window) {
    body.style.backgroundColor = 'red';
    body.ontouchstart = function(){
        this.style.backgroundColor = 'yellow';
    };
    body.ontouchend = function(){
        this.style.backgroundColor = 'green';
    };
}
else {
    body.style.backgroundColor = 'green';
    body.onmousedown = function(){
        this.style.backgroundColor = 'yellow';
    };
    body.onmouseup = function(){
        this.style.backgroundColor = 'red';
    };
}

JS Fiddle demo (and the TinyUrled alternative: tinyurl.com/drtjstest3/).

References:

• Questions and answers, here at Stackoverflow:
  • Detecting support for a given JavaScript event?
  • iOS Web App touch gestures

Comments

[Jamie Hartnoll]

Excellent, I've used that to simply change my .hoverTip classes to .clickTip where a touchscreen device is used. Not quite as user-friendly but it works! Thanks.