- Make CSS drop-down menus work on touch devices
- touch-action
- Syntax
- Values
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- Disabling all gestures
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- touch-action
- Syntax
- Values
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- Disabling all gestures
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
Make CSS drop-down menus work on touch devices
CSS drop-down menus are very popular on sites with a hierarchy of pages. They let you get to where you want to go without having to navigate the pages in that hierarchy. But pure-CSS menus suffer a problem: touch devices often can’t show the drop-down, because they don’t have “hover” and clicking on the top level link goes there. This snippet offers a way around that.
On modern touch devices like iPhones, iPads and Android phones and tablets, there is a series of events associated with a tap. You get a “touchstart” when you first tap, then a “touchend” when you lift your finger, and finally a “click” to simulate a mouse click. (There are more; see the W3C’s touch events candidate recommendation and Mozilla’s touch events page.)
What this snippet does is keep track of the first time you tap on a menu link, and suppress the click event for that tap. On the second tap, it lets the click event occur. This lets your website visitor tap to expand the drop-down menu, then tap again if they want to go to that link.
In this snippet, my menu has the id “menu” and menu items with children have the class “children”. Adjust the call to querySelectAll to fit your menu.
[edit: Chrome 17 just came out and, naturally, the code I had here gave a false positive so I’ve updated the touch test.][edit: because iOS (iPads, iPhones) now do this automatically since iOS 5, you need to be able to disable this script on those devices. I’ve augmented the script below to do that.]
// see whether device supports touch events (a bit simplistic, but. ) var hasTouch = ("ontouchstart" in window); var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window; // hook touch events for drop-down menus // NB: if has touch events, then has standards event handling too // but we don't want to run this code on iOS5+ if (hasTouch && document.querySelectorAll && !iOS5) < var i, len, element, dropdowns = document.querySelectorAll("#menu li.children >a"); function menuTouch(event) < // toggle flag for preventing click for this link var i, len, noclick = !(this.dataNoclick); // reset flag on all links for (i = 0, len = dropdowns.length; i < len; ++i) < dropdowns[i].dataNoclick = false; >// set new flag value and focus on dropdown menu this.dataNoclick = noclick; this.focus(); > function menuClick(event) < // if click isn't wanted, prevent it if (this.dataNoclick) < event.preventDefault(); >> for (i = 0, len = dropdowns.length; i < len; ++i) < element = dropdowns[i]; element.dataNoclick = false; element.addEventListener("touchstart", menuTouch, false); element.addEventListener("click", menuClick, false); >> OK, it’s a bit of a hack, but it means your website can become usable again for touch devices; hack job is done. Better would be a navigation system that doesn’t rely on hover events, which touch devices can’t give you, but that’s for your website’s redesign…
© 2023 WebAware Pty Ltd | ABN 56 079 079 593
touch-action
The touch-action CSS property sets how an element’s region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. Applications using Touch events disable the browser handling of gestures by calling preventDefault() , but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.
When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element’s descendants.
Note: After a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture.
Syntax
/* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* Global values */ touch-action: inherit; touch-action: initial; touch-action: revert; touch-action: revert-layer; touch-action: unset;
The touch-action property may be specified as either:
- One of the keywords auto , none , manipulation , or
- One of the keywords pan-x , pan-left , pan-right , and/or one of the keywords pan-y , pan-up , pan-down , plus optionally the keyword pinch-zoom .
Values
Enable browser handling of all panning and zooming gestures.
Disable browser handling of all panning and zooming gestures.
Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for «pan-x pan-y pinch-zoom» (which, for compatibility, is itself still valid).
pan-left , pan-right , pan-up , pan-down Experimental
Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling «up» (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, «pan-left pan-right» is invalid since «pan-x» is simpler, but «pan-left pan-down» is valid).
Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.
Accessibility concerns
A declaration of touch-action: none; may inhibit operating a browser’s zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
touch-action =
auto |
none |
[ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] |
manipulation
Examples
Disabling all gestures
The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.
HTML
CSS
#map height: 150vh; width: 70vw; background: linear-gradient(blue, green); touch-action: none; > Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 20, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
touch-action
The touch-action CSS property sets how an element’s region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. Applications using Touch events disable the browser handling of gestures by calling preventDefault() , but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.
When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element’s descendants.
Note: After a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture.
Syntax
/* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* Global values */ touch-action: inherit; touch-action: initial; touch-action: revert; touch-action: revert-layer; touch-action: unset;
The touch-action property may be specified as either:
- One of the keywords auto , none , manipulation , or
- One of the keywords pan-x , pan-left , pan-right , and/or one of the keywords pan-y , pan-up , pan-down , plus optionally the keyword pinch-zoom .
Values
Enable browser handling of all panning and zooming gestures.
Disable browser handling of all panning and zooming gestures.
Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for «pan-x pan-y pinch-zoom» (which, for compatibility, is itself still valid).
pan-left , pan-right , pan-up , pan-down Experimental
Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling «up» (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, «pan-left pan-right» is invalid since «pan-x» is simpler, but «pan-left pan-down» is valid).
Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.
Accessibility concerns
A declaration of touch-action: none; may inhibit operating a browser’s zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
touch-action =
auto |
none |
[ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] |
manipulation
Examples
Disabling all gestures
The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.
HTML
CSS
#map height: 150vh; width: 70vw; background: linear-gradient(blue, green); touch-action: none; > Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 20, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.