JQuery onMouseover / onClick for touch screen users (e.g. iPad)

Question

So, I created a folding menu based on a website that minimized the menu with 6 “jewel buttons” in the upper right corner of the screen, each one looks the same and contains a number, which is the number of alerts for items in the menu.

The content of these materials is not relevant to my question, but simply explains that they are therefore not textual and therefore do not have clear and easily readable labels explaining what the menu items do.

So I put a tooltip for the onMouseover tool, which displays a hidden div explaining what each menu item is.

There is also an onClick event where jQuery moves the menu in the view.

This is a private Intranet system, I would not use these menus on a public website, as it is not clear enough, but considering that this is an application, my problem is:

When viewed on an iPad, for example (and, presumably, other touch-screen devices), onMouseover is treated as onClick, so clicking a button just shows a hint, not a menu, as required.

What is the advice on working with this?

Have I seen this topic Detecting iPad Users Using jQuery? , therefore, given that this is a private web application, I could detect iPad users and redesign jQuery to ignore the onMouseover command for iPad users, but if I wanted to extend a similar application to something that could have more users, how could to handle these two events?

Answer 1

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 tested this with the following simple demo, although without event binding (for now) on the full-screen JS Fiddle demo (I also made TinyUrl to redirect to this demo, for ease of input on iOS devices: tinyurl.com/drtjstest2/ ).

Revised demo with events highlighted features:

 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 alternative to TinyUrled: tinyurl. Com / drtjstest 3 / ).

Literature:

• Questions and answers, here at Stackoverflow:
  • Support Detection for this JavaScript Event
  • gestures of the iOS touch IP application