Responding to mouse interactions (HTML)
Respond to mouse input in your Windows Store apps using C++, C#, or Visual Basic by handling the same basic pointer events that you use for touch and pen input.
These common events let you implement basic input functionality without having to write code for each input device. However, you can still take advantage of the special capabilities of each device (such as mouse wheel events), if required.
Tip The info in this topic is specific to developing Windows Store apps using JavaScript.
See Responding to mouse interactions (XAML) for Windows Store app using C++, C#, or Visual Basic.
See Developing mouse controls (DirectX and C++) for Windows Store apps using DirectX with C++.
Prerequisites: If you're new to developing Windows Store apps using JavaScript, have a look through these topics to get familiar with the technologies discussed here.
Create your first Windows Store app using JavaScript
Roadmap for Windows Store apps using JavaScript
Learn about events with Quickstart: adding HTML controls and handling events
App features, start to finish: Explore this functionality in more depth as part of our App features, start to finish series
User interaction, start to finish (HTML)
User interaction customization, start to finish (HTML)
User experience guidelines:
The platform control libraries (HTML and XAML) provide the full Windows user interaction experience, including standard interactions, animated physics effects, and visual feedback. If you don't need customized interaction support, use these built-in controls.
If the platform controls are not sufficient, these user interaction guidelines can help you provide a compelling and immersive interaction experience that is consistent across input modes. These guidelines are primarily focused on touch input, but they are still relevant for touchpad, mouse, keyboard, and stylus input.
- Guidelines for common user interactions
- Guidelines for optical zoom and resizing
- Guidelines for panning
- Guidelines for rotation
- Guidelines for Semantic Zoom
- Guidelines for visual feedback
Samples: See this functionality in action in our Windows Store app samples.
User interaction customization, start to finish sample
Input: Device capabilities sample
Input: Instantiable gestures sample
Input: Gestures and manipulations with GestureRecognizer
Overview
Mouse input is best suited for user interactions that require precision when pointing and clicking. This inherent precision is naturally supported by the UI of Windows 8, which is optimized for the imprecise nature of touch. Optimize your Windows Store app design for touch input and get basic mouse support by default.
Where mouse and touch input diverge is the ability for touch to emulate direct manipulation of UI elements on the screen through physical gestures performed on those objects (such as swiping, sliding, dragging, rotating, and so on).
To support mouse interactions in scenarios that emphasize direct manipulation, use mouse-specific UI to provide equivalent functionality for the users of your app independent of the device they are using. For example, when a mouse is detected use a scrollbar to emulate panning or previous and next buttons to flip through pages of content.
Recommendations for supporting mouse interactions
Here are some guidelines for supporting mouse interactions.
The Windows 8 mouse language
Windows 8 provides a concise set of mouse interactions that are used consistently throughout the system. Applying this mouse language consistently makes your app feel familiar for your users. This increases user confidence and makes your app easier to learn and use.
| Term | Description |
|---|---|
Hover to learn |
Hover over an element to display more detailed info or teaching visuals (such as a tooltip) without a commitment to an action. For more info on tooltips, see Adding tooltips. |
Left-click for primary action |
Left-click an element to invoke its primary action (such as launching an app or executing a command). |
Scroll to change view |
Display scroll bars to move up, down, left, and right within a content area. Users can scroll by clicking scroll bars or rotating the mouse wheel. Scroll bars can indicate the location of the current view within the content area (panning with touch displays a similar UI). |
Right-click to select and command |
Right-click to display the app bars with global commands. Right-click an element to select it and display the app bar with contextual commands for the selected element. Note Right-click to display a context menu if selection or app bar commands are not appropriate UI behaviors. But we strongly recommend that you use the app bar for all command behaviors. |
UI commands to zoom |
Display UI commands in the app bar (such as + and -), or press Ctrl and rotate mouse wheel, to emulate pinch and stretch gestures for zooming. |
UI commands to rotate |
Display UI commands in the app bar, or press Ctrl+Shift and rotate mouse wheel, to emulate the turn gesture for rotating. Rotate the device itself to rotate the entire screen. |
Left-click and drag to rearrange |
Left-click and drag an element to move it. |
Left-click and drag to select text |
Left-click within selectable text and drag to select it. Double-click to select a word. |
Mouse corners and edges for system commands |
Move mouse to top-right or bottom-right corner on left-to-right (or left edge on right-to-left layouts) of the screen reveals the charms that expose system commands. Move mouse to top-left corner on left-to-right (or top right cornier on right-to-left layouts) to display thumbnail of the most recently used app. Left-click or click-and-drag to cycle through and switch to running apps or drag to snap the app (if supported by screen resolution). Move mouse to the bottom-left corner on left-to-right (or bottom right cornier on right-to-left layouts) to display thumbnail of the Start screen. Left-click and drag from the top edge toward the bottom edge of the screen to close the current app. Left-click and drag from the top edge down and to the left or right edge to snap the current app to that side of the screen. |
Hardware
Query the mouse device capabilities (MouseCapabilities) to identify what aspects of your app UI the mouse hardware can access directly. For more info on querying device capabilities, see Quickstart: Identifying pointer devices.
Some mouse devices have 5 buttons. The fourth and fifth buttons, referred to as X buttons, typically navigate back and forward in Web browsers such as Windows Internet Explorer. Associate these buttons with appropriate UI (back and forward buttons) in your app.
If a mouse has a wheel button, make rotating forward and backward activate vertical (up and down) scrolling within the content area. Activate horizontal (left and right) scrolling if the content area doesn't scroll vertically. If the wheel button is a tilt wheel, it should activate only horizontal scrolling.
The scroll wheel should activate zooming (if exposed) when the user presses the Ctrl modifier key.
Visual feedback
- When a mouse is detected (through move or hover events), show mouse-specific UI to indicate functionality exposed by the element. If the mouse doesn't move for a certain amount of time, or if the user initiates a touch interaction, make the mouse UI gradually fade away. This keeps the UI clean and uncluttered.
- Don't use the cursor for hover feedback, the feedback provided by the element is sufficient (see Cursors below).
- Don't display visual feedback if an element doesn't support interaction (such as static text).
- Don't use focus rectangles with mouse interactions. Reserve these for keyboard interactions.
- Display visual feedback concurrently for all elements that represent the same input target.
- Provide buttons (such as + and -) for emulating touch-based manipulations such as panning, rotating, zooming, and so on.
For more general guidance on visual feedback, see Guidelines for visual feedback.
Cursors
A set of standard cursors is available for a mouse pointer. These are used to indicate the primary action of an element.
Each standard cursor has a corresponding default image associated with it. The user or an app can replace the default image associated with any standard cursor at any time. Windows Store apps specify a cursor image through the PointerCursor function.
If you need to customize the mouse cursor:
- Always use the arrow cursor (
.png "Arrow cursor")
) for clickable elements. Don't use the pointing hand cursor (.png "Pointing hand cursor")
) for links or other interactive elements. Instead, use hover effects (described earlier). - Use the text cursor (
.png "Text cursor")
) for selectable text. - Use the move cursor (
.png "Move cursor")
) when moving is the primary action (such as dragging or cropping). Don't use the move cursor for elements where the primary action is navigation (such as Start tiles). - Use the horizontal, vertical and diagonal resize cursors (
.png "Vertical resize cursor")
, .png "Horizontal resize cursor")
, .png "Diagonal resize cursor (lower left, upper right)")
, .png "Diagonal resize cursor (upper left, lower right)")
), when an object is resizable. - Use the grasping hand cursors (
.png "Grasping hand cursor (open)")
, .png "Grasping hand cursor (closed)")
) when panning content within a fixed canvas (such as a map).
Commanding
Clicking the right mouse button should activate the app's app bar. Avoid dead zones in the UI of your app that don't accept right-clicks. For more info on app bars, see Adding app bars.