Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preferred Alternative to OnMouseOver for touch

Is there a preferred alternative or best practice for handling OnMouseOver javascript events on touch devices? All I can think is to convert all events to OnMouseClick. Unfortunately this muddles the differences between events triggered by hovering the cursor and events triggered by clicking the cursor.

Are there any alternatives, or work arounds, that are less disruptive to the UX of a webpage that will be used with both mouse devices and touch devices?

like image 975
Daniel Nill Avatar asked Dec 28 '10 23:12

Daniel Nill


People also ask

What is the difference between Onmouseenter and Onmouseover?

The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element. The onmousemove event triggers every time the mouse pointer is moved over the div element.

What to use instead of hover for mobile?

Add a secondary menu The first press simulates the hover of a mouse and the second press simulates the user taking the primary action. This is a neat alternative to hover effects but is constrained by screen size and limits the amount of information you can add to your effect.

How do you simulate hover on touch devices?

To answer your main question: “How do I simulate a hover with a touch in touch enabled browsers?” Simply allow 'clicking' the element (by tapping the screen), and then trigger the hover event using JavaScript. var p = document.

What is the use of mouseover?

In computing, a mouseover , mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers.


1 Answers

Is there a preferred alternative or best practice for handling OnMouseOver javascript events on touch devices?

The short answer is no.

Device-specific events don't have a 1:1 mapping to events from other devices. There is no proper equivalent of 'hovering' when using Touch.

Mouse events (mouseover, mouseout, mousedown, mouseup, mousemove, etc) are specific to the mouse input device. The keyboard has keydown, keypress and keyup. Touch has touchstart, touchmove, touchend and touchcancel. Webkit on the iPhone/iPad/etc has additional gesture start/move/end events that are Apple-specific.

Higher-level, generic events such as focus, blur, click, submit, etc can be triggered by one of these events. A click event, for example, can be triggered using a mouse, touch or keyboard event. (click, btw, is an event with an inappropriate name, which should more properly be called action but because of its Mouse history is still called click).

The preferred (or 'One Web') approach is using the Mouse events for mouse specific things where you can't avoid them and and sticking to the generic events for everything else.

Depending on the WebKit build and the flags used to build it you can trigger some Mouse events on some Touch interfaces in some special cases, but you really don't want to build your UI on that because the only reason these cases exist is to allow mobile-Webkit to get traction in the market.

Touch Events are also inconsistent across platforms. Take a look at ppk's work for some reference if you're doing any mobile/touch stuff, http://quirksmode.org/mobile/tableTouch.html

like image 174
Michiel Kalkman Avatar answered Sep 23 '22 08:09

Michiel Kalkman