Preferred Alternative to OnMouseOver for touch

by

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

More Related Contents:

  1. What’s the best way to detect a ‘touch screen’ device using JavaScript?
  2. How do I simulate a hover with a touch in touch enabled browsers?
  3. Binding multiple events to a listener (without JQuery)?
  4. Javascript Drag and drop for touch devices [closed]
  5. Disable hover effects on mobile browsers
  6. Detecting that the browser has no mouse and is touch-only
  7. jQuery on ‘double click’ event (dblclick for mobile)
  8. prevent touchstart when swiping
  9. Disable scrolling when touch moving certain element
  10. Understanding touch events
  11. How to remove an event listener in javascript?
  12. How to prevent sticky hover effects for buttons on touch devices
  13. Consider marking event handler as ‘passive’ to make the page more responsive
  14. Eliminate 300ms delay on click events in mobile Safari
  15. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  16. How to optimize website for touch devices
  17. manually trigger touch event
  18. How to determine if the client is a touch device [duplicate]
  19. Variation of e.touches, e.targetTouches and e.changedTouches
  20. How can I run different scripts based on time? [closed]
  21. “Uncaught SyntaxError: Unexpected token , ” when create my object javascript
  22. Check if a value is an object in JavaScript
  23. Difference between defer().promise and Promise
  24. Making custom right-click context menus for my web-app
  25. Amazon S3 direct file upload from client browser – private key disclosure
  26. Get query string parameters url values with jQuery / Javascript (querystring)
  27. jQuery get values of checked checkboxes into array
  28. How To Only Allow Alpha Numeric Chars With JavaScript
  29. How to implement hierarchical multilevel datatable in javaScript?
  30. Iterate through nested json object array

Leave a Comment