##

Demos

Menu Search

Note: this page has not been updated after 1.3

## Question:

# How do I use touch and mouse events?

## Answer:

One important consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 300-500ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit both touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.

Our solution is to create a set of virtual events that normalize mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: `vmouseover`, `vmousedown`, `vmousemove`, `vmouseup`, `vclick`, and `vmousecancel`.

- Home

- ### Getting started

  - Introduction
  - Responsive Web Design

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Transitions
  - Loader

- ### Events

  - Swipe list items
  - Swipe page navigation

- ### Theme

  - Default theme
  - Classic theme
- Buttons

- ### Icons

  - Icons
  - Icons load script

- ### Toolbars

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - AJAX optimized toolbars
  - Form in toolbar
  - Navbar widget
- Tabs

- ### Panels

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popups

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page

- ### Collapsibles

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Listviews

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid

- ### Tables

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Filterable

- ### Forms

  - Forms
  - Forms gallery
  - Forms disabled
  - Field containers
  - Hide labels
  - Textinput
  - Input button
  - Checkboxes
  - Radio buttons
  - Selectmenu
  - Custom select menu
  - Custom select menu with filter
  - Slider
  - Slider flip toggle switch
  - Slider tooltip
  - Rangeslider
  - Flipswitch

- ### Controlgroups

  - Controlgroup
  - Dynamic controlgroups

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids

- ### 3rd party API

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home

- ### Getting started

  - Introduction
  - Responsive Web Design

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Transitions
  - Loader

- ### Events

  - Swipe list items
  - Swipe page navigation

- ### Theme

  - Default theme
  - Classic theme
- Buttons

- ### Icons

  - Icons
  - Icons load script

- ### Toolbars

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - AJAX optimized toolbars
  - Form in toolbar
  - Navbar widget
- Tabs

- ### Panels

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popups

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page

- ### Collapsibles

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Listviews

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid

- ### Tables

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Filterable

- ### Forms

  - Forms
  - Forms gallery
  - Forms disabled
  - Field containers
  - Hide labels
  - Textinput
  - Input button
  - Checkboxes
  - Radio buttons
  - Selectmenu
  - Custom select menu
  - Custom select menu with filter
  - Slider
  - Slider flip toggle switch
  - Slider tooltip
  - Rangeslider
  - Flipswitch

- ### Controlgroups

  - Controlgroup
  - Dynamic controlgroups

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids

- ### 3rd party API

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle