safari simulate touch events

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Multi-touch web development

Introduction

Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events. For example, nearly any fast-paced game requires the player to press multiple buttons at once, which, in the context of a touchscreen, implies multi-touch.

Apple introduced their touch events API in iOS 2.0. Android has been catching up to this de-facto standard and closing the gap. Recently a W3C working group has come together to work on this touch events specification .

In this article I’ll dive into the touch events API provided by iOS and Android devices, as well as desktop Chrome on hardware that supports touch, and explore what sorts of applications you can build, present some best practices, and cover useful techniques that make it easier to develop touch-enabled applications.

Touch events

Three basic touch events are outlined in the spec and implemented widely across mobile devices:

• touchstart : a finger is placed on a DOM element.
• touchmove : a finger is dragged along a DOM element.
• touchend : a finger is removed from a DOM element.

Each touch event includes three lists of touches:

• touches : a list of all fingers currently on the screen.
• targetTouches : a list of fingers on the current DOM element.
• changedTouches : a list of fingers involved in the current event. For example, in a touchend event, this will be the finger that was removed.

These lists consist of objects that contain touch information:

• identifier : a number that uniquely identifies the current finger in the touch session.
• target : the DOM element that was the target of the action.
• client/page/screen coordinates : where on the screen the action happened.
• radius coordinates and rotationAngle : describe the ellipse that approximates finger shape.

Touch-enabled apps

The touchstart , touchmove , and touchend events provide a rich enough feature set to support virtually any kind of touch-based interaction – including all of the usual multi-touch gestures like pinch-zoom, rotation, and so on.

This snippet lets you drag a DOM element around using single-finger touch:

Below is a sample that displays all current touches on the screen. It’s useful just to get a feeling for the responsiveness of the device.

A number of interesting multi-touch demos are already in the wild, such as this canvas-based drawing demo by Paul Irish and others.

And Browser Ninja , a tech demo that is a Fruit Ninja clone using CSS3 transforms and transitions, as well as canvas:

Best practices

Prevent zooming.

Default settings don't work very well for multi-touch, since your swipes and gestures are often associated with browser behavior, such as scrolling and zooming.

To disable zooming, setup your viewport so that it is not user scalable using the following meta tag:

Check out this mobile HTML5 article for more information on setting your viewport.

Prevent scrolling

Some mobile devices have default behaviors for touchmove, such as the classic iOS overscroll effect, which causes the view to bounce back when scrolling exceeds the bounds of the content. This is confusing in many multi-touch applications, and can easily be disabled:

Render carefully

If you are writing a multi-touch application that involves complex multi-finger gestures, be careful how you react to touch events, since you will be handling so many at once. Consider the sample in the previous section that draws all touches on the screen. You could draw as soon as there is a touch input:

But this technique does not scale with number of fingers on the screen. Instead, you could track all of the fingers, and render in a loop to get far better performance:

Make use of targetTouches and changedTouches

Remember that event.touches is an array of ALL fingers in contact with the screen, not just the ones on the DOM element's target. You might find it much more useful to use event.targetTouches or event.changedTouches instead.

Finally, since you are developing for mobile, you should be aware of general mobile best practices, which are covered in Eric Bidelman's article , as well as this W3C document .

Device support

Unfortunately, touch event implementations vary greatly in completeness and quality. I wrote a diagnostics script that displays some basic information about the touch API implementation, including which events are supported, and touchmove firing resolution. I tested Android 2.3.3 on Nexus One and Nexus S hardware, Android 3.0.1 on Xoom, and iOS 4.2 on iPad and iPhone.

In a nutshell, all tested browsers support the touchstart , touchend , and touchmove events.

The spec provides three additional touch events, but no tested browsers support them:

• touchenter : a moving finger enters a DOM element.
• touchleave : a moving finger leaves a DOM element.
• touchcancel : a touch is interrupted (implementation specific).

Within each touch list, the tested browsers also provide the touches , targetTouches and changedTouches touch lists. However, no tested browsers support radiusX, radiusY or rotationAngle, which specify the shape of the finger touching the screen.

During a touchmove, events fire at roughly 60 times a second across all tested devices.

Android 2.3.3 (Nexus)

On the Android Gingerbread Browser (tested on Nexus One and Nexus S), there is no multi-touch support. This is a known issue .

Android 3.0.1 (Xoom)

On Xoom's browser, there is basic multi-touch support, but it only works on a single DOM element. The browser does not correctly respond to two simultaneous touches on different DOM elements. In other words, the following will react to two simultaneous touches:

But the following will not:

iOS 4.x (iPad, iPhone)

iOS devices fully support multi-touch, are capable of tracking quite a few fingers and provide a very responsive touch experience in the browser.

Developer tools

In mobile development, it's often easier to start prototyping on the desktop and then tackle the mobile-specific parts on the devices you intend to support. Multi-touch is one of those features that's difficult to test on the PC, since most PCs don't have touch input.

Having to test on mobile can lengthen your development cycle, since every change you make needs to be pushed out to a server and then loaded on the device. Then, once running, there’s little you can do to debug your application, since tablets and smartphones lack web developer tooling.

A solution to this problem is to simulate touch events on your development machine. For single-touches, touch events can be simulated based on mouse events. Multi-touch events can be simulated if you have a device with touch input, such as a modern Apple MacBook.

Single-touch events

If you would like to simulate single-touch events on your desktop, Chrome provides touch event emulation from the developer tools. Open up the Developer tools, then select the Settings gear, then "Overrides" or "Emulation", and turn on "Emulate touch events".

For other browsers, you may wish to try out Phantom Limb , which simulates touch events on pages and also gives a giant hand to boot.

There's also the Touchable jQuery plugin that unifies touch and mouse events across platforms.

Multi-touch events

To enable your multi-touch web application to work in your browser on your multi-touch trackpad (such as a Apple MacBook or MagicPad), I've created the MagicTouch.js polyfill . It captures touch events from your trackpad and turns them into standard-compatible touch events.

• Download and install the npTuioClient NPAPI plugin into ~/Library/Internet Plug-Ins/.
• Download the TongSeng TUIO app for Mac’s MagicPad and start the server.
• Download MagicTouch.js , a javascript library to simulate spec-compatible touch events based on npTuioClient callbacks.
• Include the magictouch.js script and npTuioClient plugin in your application as follows:

You may need to enable the plugin.

A live demo with magictouch.js is available at paulirish.com/demo/multi :

I tested this approach only with Chrome 10, but it should work on other modern browsers with only minor tweaks.

If your computer does not have multi-touch input, you can simulate touch events using other TUIO trackers, such as the reacTIVision . For more information, see the TUIO project page .

Note that your gestures might be identical to OS-level multi-touch gestures. On OS X, you can configure system-wide events by going to the Trackpad preference pane in System Preferences.

As multi-touch features become more widely supported across mobile browsers, I'm very excited to see new web applications take full advantage of this rich API.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2011-08-21 UTC.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Simulate touch events even on your desktop browser

mobkits/touch-simulate

Folders and files, repository files navigation, touch-simulate.

Simulate touch event(A fake one with pageX, pageY, clientX, clientY available) even at desktop browser for testing.

You can have touches by e.touches[0] e.changedTouches[0] or e.targetTouches[0] , they are the same.

Already used for testing my components like iscroll , pull-to-refresh and sweet-sortable

• Automatic emit touchmove when moving
• Corrent e.clientX , e.clientY and many others
• Promise based, chainaible methods
• Confige movemoment by speed and ease function

You can chain the methods, the function call would wait for previous one to be fullfilled, the chainable method list:

start moveUp moveDown moveLeft moveRight moveTo move wait

TouchSimulate(el, option)

Create TouchSimulate instance with element and options

• option.speed set speed of px/s default 40
• option.fixTarget use the real target at the point instead of el to dispatch the event
• option.point show a transparent point at the screen, can not use with fixTarget
• option.ease define a ease function for the movemonent, default linear

.speed(number)

Set the speed to number

.ease(string)

Set the ease function name

.start([position])

Set the touch start el and optional position(default is center) position could be t l r b for alias for top, left, right and bottom position could also be an array, which contains [x, y] for clientX and clientY

.moveUp(distance, [end])

.movedown(distance, [end]), .moveleft(distance, [end]), .moveright(distance, [end]).

If not started, start at the center of element, or the current position Move to one direction, return promise which resolved with event of touchend If end is set to false, no touchend event is fired.

.moveTo(x, y, [end])

Instead of move direction, set move destination, x and y are clientX and clientY (relative to viewport)

.move(angel, distance, [end])

Use angel which should be (0 ~ 2*PI) instead of up down left nad right

.tap([position], [duration])

Helper to emit tap event, return promise, resolved with event of touchend

Helper to return a promise after wait for ms

• JavaScript 73.3%
• Makefile 0.6%

Javascript touch events and mobile-specific considerations

In the evolving landscape of web development, one aspect of JavaScript that is increasingly garnering attention is touch events. Ancillary to modern mobile web applications, understanding touch events and harnessing their functionalities is no longer optional for developers. This comprehensive guide, "Deep Dive into JavaScript Touch Events: Mobile-Specific Considerations and Optimizations," addresses this increasingly relevant topic, offering not just theoretical insights, but also practical applications and best practices for optimizing touch events in your applications.

Throughout the article, we will explore the fundamental touch event interfaces, delve into core touch event types, and give you inside access to how they function in real-world scenarios. More than just defining terms, we will also provide hands-on code examples, discuss common mistakes, and how to avoid them. By the time you reach the end, you will not only be able to handle single touch points, but also gain insight into managing multiple touch scenarios—an essential expertise in today's multi-touch environment.

So, whether you are aiming to enhance the user experience of your web application, or you are simply curious to find out more about JavaScript touch and pointer events, this deep-dive is guaranteed to deliver value. This is more than just an exploration; it is an opportunity to stay ahead in the fast-paced world of modern web development. Let's dive deep into the fascinating world of JavaScript touch events together!

Understanding Touch Events and Their Importance

What are Touch Events?

Touch events are low-level interfaces that interpret finger (or stylus) activity on touch screens or trackpads. This technology has become vital in ensuring that web content is compatible with touch-based user interfaces. Touch events are similar to mouse events, with the added advantage of supporting simultaneous touches at multiple locations on the touch interface. This simultaneous support for multi-touch interactions underscores the importance of touch events in advancing UI experiences, especially for portable devices with touchscreen functionality.

Due to the abundance of touch-enabled devices, many modern web applications directly process touch-based input using touch events instead of relying on interpreted mouse events which do not support concurrent user input. This shift has greatly enhanced user experiences, particularly in applications that require touch-based gestures or other touch-driven interfaces.

Understanding Interfaces

To truly grasp the mechanics of touch events, it's important to understand the three types of touch event interfaces: Touch, TouchEvent, and TouchList.

Touch : This interface encapsulates the properties of a single touch point. A touch point represents a point of contact on the touch-sensitive surface, typically referred to as the "surface". This includes information such as the position of the touch point relative to the viewport of the browser.

TouchEvent : This interface represents an event occurring when the state of touches on the surface changes. In essence, an application receives touch events during the start (touchstart), move (touchmove), and end (touchend) phases of a touch interaction. According to the standard, a touch interaction starts when a finger (or stylus) first places on the surface, other fingers can subsequently touch or move across the surface, and the interaction ends when the fingers lift away from the surface.

TouchList : This interface represents a list of the touch points currently active on the surface. It provides features to access the properties of individual touches within the list.

Why are Touch Events Critical?

In the context of modern web development, touch events play a pivotal role, especially for mobile applications. Given the widespread adoption of touchscreen devices, creating web content that supports touch-based interactions has become non-negotiable.

Touch events open up a range of possibilities for web applications, such as supporting gesture recognition, multi-touch, drag and drop operations, among other touch-specific interactions. They are integral to ensuring applications are intuitive, responsive, and user-friendly.

Every developer must understand how these touch events work; they are the backbone of many user interaction features we take for granted on mobile devices today. Therefore, a deep knowledge of touch events is essential for developing high-quality applications with satisfying, smooth, and accessible user experiences – a standard that all modern web applications should strive to achieve.

The following question might be a good food for thought: How can developers leverage the potential of touch events to further enhance the interactive capabilities of their web applications?

Deciphering Touch Event Types and Their Uses

Let's plunge into the crux of touch events in JavaScript: touchstart, touchmove, touchend, and touchcancel. We are going to explore what each event accomplishes, how to put them in use in coding scenarios, and how to avert issues associated with them.

Touchstart Event

The touchstart event is akin to the initial handshake in touch interaction, triggered when a touch point is first registered on the touch sensor. Think of this as the moment of first contact—when a user’s finger makes the maiden contact with the device's screen.

Here's a concrete example of deploying a touchstart event handler on a chosen DOM element:

A common irregularity found involves developers bypassing multi-touch conditions within their touchstart event handlers. While single touches are straightforward, validating your code to function accurately with multiple concurrent touch points is essential.

Touchmove Event

The touchmove event is next in line, incited when an active touch point makes a move in any direction. This event provides the user with an interactive interface, identical to the click-and-drag movement in a mouse.

Here is an example appropriately illustrating a touchmove event:

Take note, the touchmove event fires at a rapid rate, which could result in bottlenecking performance if your handler performs numerous actions. Always be mindful to keep your touchmove handlers optimized and simplified.

Touchend Event

The touchend event takes the center stage when a touch point is lifted, i.e., when the user lifts their finger off the touch surface. This can be equated to releasing the mouse button in a traditional user interface.

Here is an example showing how to register a touchend event handler:

A widespread misconception is that a touchend event will always trail every touchstart event. However, in scenarios where the touch point is abruptly terminated, a touchcancel event occurs instead. Always ensure your code accommodates such potentialities.

Touchcancel Event

Last but not least, the touchcancel event, unique in its right. It comes into notice when an ongoing touch event unexpectedly pauses or gets disrupted due to external factors - perhaps because the touch point drifts away from the scope of the screen or too many touch points are initiated.

Below is a handling mechanism for a touchcancel event:

Frequently, developers overlook the touchcancel event handlers, considering them non-essential. However, it's paramount to anticipate any ongoing touch operation being interrupted unexpectedly and design your code to handle such scenarios to preclude unforeseen behavior.

Touch events introduce a unique array of interactive possibilities for your users —a multitude of touch traces that users can create as they interact with your site. Are you employing all these touch events efficiently in your code, guaranteeing an optimal mobile browsing experience? Do you see any prospects for refining your touch event handlers, making them more seamless, or simply more engaging for your users? Prompt yourself with these thought-provoking questions. Dive deep into the fine details, and keep those grey cells coding!

Practical Application: From Touch Events to Gestures

Defining gestures through touch events is a key aspect for creating interactive and user-friendly mobile web applications. By leveraging the data provided by touch events, developers can design a broad range of intuitive user gestures.

JavaScript does not natively classify touch events as taps, double taps, swipes, or long presses. These interpretations are achieved using attributes and timing associated with the touch events.

Let's dive deeper into how we can utilize touch events data to interpret varying user gestures.

Analyzing Touch Start and End Position

A crucial step for creating gesture-based interactions involves monitoring the start and end points of a touch. This becomes particularly important while implementing swipe gestures within your application.

Consider the following code snippet:

In this example, the touchstart event is used to store the initial touch point. During the touchend event, the ending touch point is obtained, and the distance traveled is computed. A movement exceeding a certain threshold (100 pixels, in this case) is interpreted as a swipe, with the direction determined accordingly.

Time-Based Touch Interactions

Another critical aspect in interpreting gestures is the duration of the touch. Distinguishing between a 'tap' and a 'long press' is possible by recording the time between touchstart and touchend .

Here's an illustrative example:

In the above code, we note the instant the touch starts and ends. A 'short tap' is interpreted if the touch's duration is less than a certain threshold (200 milliseconds, in this case). A longer duration than this threshold is interpreted as a 'long press'.

Multi-Touch Gestures and TouchLists

Involvement of multiple fingers for interactions like pinch or two-finger swipe demand several touch points to be tracked simultaneously. For this, the touches attribute of touch events, or a TouchList, is quite useful.

Despite the power that multi-touch gesture detection and interpretation provides, implementing it can be computationally intense and complicated, requiring advanced logic considerations.

Optimal touch event detection and gesture interpretation strategies are unique for each application and heavily dependent on your specific user expectations and needs.

Imagine the far-reaching impact of proficient gesture detection in shaping a smoother, more engaging user experience! How could effective application of multi-touch gestures take your application's usability to newer heights in today's competitive mobile market?

Using Touch Event Attributes for Gesture Interpretation

Different attributes from a TouchEvent object can come into play for more complex gestures. For example, the targetTouches list can be handy to track all touches within a specific target element, allowing for more localized gesture detection.

To illustrate this, consider an application that allows users to add annotations on an image with a two-finger tap. Here, the targetTouches list could be valuable to distinguish whether the two simultaneous touches were indeed on the image.

Similarly, the changedTouches list provides details about the touches that are new or have changed from the previous touch event. This list can be instrumental in determining whether a new touch point was added or an existing one was moved or removed, enabling us to design nuanced multi-touch gestures.

By creatively using these attributes and their combinations with timing-related aspects, we can unlock a wide array of gesture recognition possibilities and elevate our application's interaction design.

Touch Events Interaction with Browsers

When discussing touch events in JavaScript, the interaction of various browsers with these events plays a critical role in their handling. Primarily, when there is a single active touch point, browsers typically dispatch emulated mouse and click events. Now, while this scenario might work successfully in certain applications, it can introduce potential issues where this synthetic behavior fails to reconcile with your event handling strategy.

A clear understanding of this concept is crucial, especially when considering multi-touch interactions. In case there are two or more active touch points, the browser will usually generate touch events alone, skipping over the emulated mouse events. Processing this distinction properly ensures your applications are well-prepared to manage multiple concurrent inputs, thereby enhancing user experiences.

One of the key instruments to fluently manage the confluence of touch and mouse events is the preventDefault() method. This JavaScript method, when implemented in touch event handlers, prevents the browser from triggering its default action, like sending the emulated mouse events.

Consider the following use case:

In this example, invoking preventDefault() during touchstart or on the first touchmove in a series will prevent the subsequent corresponding mouse events from firing. But it's important to understand this might break expected behaviors, like link navigation, because calling preventDefault() on the touchstart will shut off mouse events entirely.

It's a common misconception to preemptively call preventDefault() right on touchstart , which can stifle the consistent behavior of links and other elements that rely on mouse events. An optimal solution is to call the method on touchmove or touchend instead, as these scenarios ensure the proper working of habitual functionalities.

Illustrating the concept clearer, let's rectify the mistake in the following touch event handling example:

Incorrect use:

Corrected use:

By moving the preventDefault() call to occur on 'touchmove' or 'touchend', general behaviors, such as link navigation, will function correctly.

It's also noteworthy to include a fallback mechanism if touch events are not supported by certain devices. We can utilize a simple feature detection in JavaScript for this purpose:

Finally, recollect that adding touch point handlers directly to their specific target elements and minimizing the work done in touch handlers are parameters of best practices in this area.

However, here's a thought-provoking question: How would you mitigate the scenario where preventDefault() does not consistently prevent the default behavior across different browsers? One feasible strategy could be implementing a feature detection system for each browser and handling the touch events accordingly. Remember, the solution lies in restructuring your codes for such edge cases and managing multi-touch dynamics effortlessly, eventually rendering your applications operational across all devices.

Handling Multiple Touch Points: A Tracker's Guide

The topic at hand is managing multi-touch events in Javascript. This process essentially follows through four principle steps, each of which requires a careful and nuanced understanding. Before we deep dive, it's important to remember that performance is paramount when working with touch events. Any sluggishness in response can significantly depreciate the user experience. Usability-wise, the target touch element should be large enough to accommodate a finger touch, to avoid misfires and undesired triggers of adjacent elements.

Our approach will involve working with an ongoingTouches array. The array is initially empty and attached to the window object as a property for globlal access. We'll be adding, updating, and removing touches from this array as the user interacts with the screen.

Touch Start Phase: touchstart

In the touch start phase, we listen for the touchstart event and add all new touches to the ongoingTouches array. When a touch point is placed on the touch surface, the touchstart event is fired. In the handler for this event, we want to do two main things: add the new touch point to ongoingTouches and visually represent the touch point in our user interface.

Here's what the code might look like:

In copyTouch() , we're extracting only the properties we need. This is a good practice as it avoids keeping unnecessary references and consuming memory.

Touch Move Phase: touchmove

The next phase is the touch move phase. During this phase, the touchmove event is fired whenever a touch point is moved along the touch surface. Here, we have the responsibility to both update our cached touch information and visually represent the movement of the touch point.

Notice that we only update the touch if it's already in the ongoingTouches array. This is crucial to keep track of the same touch across events.

Touch End Phase: touchend

The touchend event is fired when a touch point is removed from the touch surface. In this phase, we want to remove the touch record from ongoingTouches and draw a line to represent the final movement of the touch in our user interface.

Touch Cancel Phase: touchcancel

Lastly, the touchcancel event is fired when the touch point has been disrupted in an implementation-specific manner such as creation of too many touch points. The primary task in handling touch cancellation is similar to the touch end phase – we'll remove the cancelled touch from ongoingTouches .

Remembering to handle touchcancel events is one of the common errors developers make when handling touch events. It's easy to forget since there's no visible difference to the user but handling cancellations properly ensures consistent touch tracking underneath the surface.

Through this method, we can maintain a tight grip on the various touch events that occur throughout the lifespan of a user's touch, effectively enabling us to manage and cater to multi-touch scenarios. There is plenty of room for customization in such an approach, catering as per the needs of the project in hand. However, always remember that there is a fine balance between customization and performance, and it is our responsibility as developers to find it.

Touch vs Pointer Events: Which One Triumphs?

As web development continues to evolve, the need for diverse input event handling becomes evident. Two prominent approaches in this regard are Touch Events and Pointer Events. Understanding the pros and cons of each provides a crucial insight into how they can be effectively integrated into modern web development workflows.

Touch Events were designed primarily for devices with touch screens. These events interpret finger or stylus activity on touch screens or trackpads, providing robust support for touch-based user interfaces. When a touch interaction begins, say from the moment a finger first contacts a surface, a series of touch events (touchstart, touchmove, touchend) are triggered. This allows for complex, application-specific multi-touch interactions. The main pro of using Touch Events is that they support multiple simultaneous inputs at different locations on the touch surface, making it favorable for touch-enabled devices.

Despite their utility, the dependence on touch input can lead to limitations. For example, concurrent input handling is a significant challenge as these events are typically modeled on physical touch input. It also falls short when it comes to interacting with non-touch input devices. This is where Pointer Events shine.

On the other hand, Pointer Events were developed as part of the new input mechanisms to reduce application complexity due to various input types. These events create an abstract pointer that unifies input from any device, be it a mouse, a pen/stylus, or a touchscreen. This one-size-fits-all event model simplifies application input by making code handling for pointer events closely resemble mouse handling code. This solves the problem of concurrent input handling and ensures compatibility across input mechanisms. Pointer Events support also boasts high implementation status across main browser platforms like Chrome, Firefox, IE11, and Edge.

Although Pointer Events seem like the ideal solution, some cons need to be addressed. Its model lacks the support for complex multi-touch interactions offered by Touch Events. The simultaneous touch inputs at different locations on the touch surface might not be as seamless as with Touch Events.

In conclusion, the choice between Touch and Pointer Events depends on the requirements of your web application. If you aim for simple, device-agnostic input handling and the need for complex touch gestures is minimal, Pointer Events would be a good choice. Conversely, if your application relies heavily on multi-touch activities, then Touch Events might be the preferred approach.

A good practice in real-world scenarios is to consider implementing fallbacks for both models. For Touch Events, when they are not supported, traditional click events can be used. For Pointer Events, consider handling regular mouse events as a fallback, should the need arise.

Finally, remember that even if a user agent supports Touch Events, it does not necessarily restrict other input mechanisms. Users may use a touchscreen in conjunction with a trackpad, mouse, or keyboard. Thus, developers should avoid coding that binds event listeners to "touch or mouse/keyboard," as it might cause the application to be touch-exclusive, limiting users from using other input types.

Do you feel the benefits of Pointer Events outweigh their potential complexities in your development environment? Or does the distinct advantage of Touch Events in supporting complex gestures make them irreplaceable? Picking a side in the Touch Events vs. Pointer Events debate is largely a question of understanding and catering to your user base, an insight that holds relevance far beyond this discussion.

Enhancing Touch Events: Best Practices and Optimizations

One of the foundational aspects of enhancing the efficiency and usability of touch event-driven applications revolves around minimizing the workload within touch handlers. Performing a significant volume of computations within a touch handler can potentially lead to performance bottlenecks that degrade the overall experience. Below demonstrates an optimized pattern that infuses better performance:

In this example, touch handlers are added onto a single, specific element, identified by the id touch-element . This focused approach minimizes memory usage and optimizes performance by avoiding the inclusion of redundant nodes in the touch handling pipeline.

Another aspect of paramount concern is the target element's size. In an environment dictated by finger-based interactions, the touch target must comfortably accommodate a user's finger. Apple's Human Interface Guidelines recommend that the touch target size should be at least 44 pixels wide and 44 pixels tall. However, for more comfort and fewer errors, a size of 80x80 pixels could be more accommodating.

Incorporating a larger touch target ensures robust usability, minimizing the likelihood of accidental activations of nearby elements.

Despite the value of simulations and emulations, they remain second-best to actual device-based testing. Using the following conditional check allows us to configure either touch event handlers or mouse event handlers, providing a compatibility blanket across different device classes:

One common mistake developers often make when working with touch interfaces is forgetting the effects of touch events on default browser behaviors such as scrolling and zooming. It's important to ensure that the touch-based interactions implemented in your web application do not interfere with these conventional behaviors, offering a superior user experience.

Consider this: How can we develop touch interfaces that are mindful of the default browser behaviors and yet fluid in their operation? And more importantly, how do we spread this awareness and practice among the developer community to make the web more friendly for touch-screen users? Should browsers provide more explicit and developer-friendly ways to handle these considerations? Let's continue to explore, learn, and adapt as we navigate the rapidly evolving terrain of modern web development.

In this comprehensive guide on JavaScript touch events and mobile-specific considerations, the author emphasizes the increasing importance of understanding and optimizing touch events in modern web development. The article provides a deep dive into touch event interfaces, such as Touch, TouchEvent, and TouchList, and explains their significance in advancing user experiences on touch-enabled devices. Practical applications and best practices for handling touch events are also discussed, including code examples, common mistakes to avoid, and ways to leverage touch events for enhancing interactive capabilities.

The key takeaway from this article is that touch events are critical for creating intuitive and user-friendly mobile web applications. Developers need to have a deep understanding of touch event interfaces and how to optimize their implementation to ensure smooth and satisfying user experiences. The article challenges developers to think about how they can leverage the potential of touch events to further enhance the interactive capabilities of their web applications.

A challenging technical task related to touch events could be to create a multi-touch gesture recognition system. This could involve tracking the positions of multiple touch points, interpreting the gestures based on the touch event data, and implementing specific actions or animations in response to different gestures. This task would require a thorough understanding of touch event interfaces and a creative approach to gesture recognition algorithms. The goal would be to create a seamless and engaging user experience through touch-based interactions.

How do I get only touch events to fire in Simulator?

Touch events

Method of registering when, where and how the interface is touched, for devices with a touch screen. These DOM events are similar to mousedown, mousemove, etc.

• 4 - 21 : Not supported
• 22 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 12 - 18 : Disabled by default
• 79 - 122 : Supported
• 3.1 - 17.3 : Not supported
• 17.4 : Not supported
• 17.5 - TP : Not supported
• 2 - 3.6 : Not supported
• 4 - 17 : Partial support
• 18 - 24 : Supported
• 25 - 51 : Disabled by default
• 52 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 9 - 12.1 : Not supported
• 15 - 108 : Supported
• 109 : Supported
• 5.5 - 9 : Not supported
• 10 : Not supported (but has polyfill available)
• 11 : Not supported (but has polyfill available)

Chrome for Android

Safari on ios.

• 3.2 - 17.3 : Supported
• 17.4 : Supported
• 17.5 : Supported

Samsung Internet

• 4 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 : Not supported
• 11 - 12.1 : Supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Not supported
• 3 : Supported

Internet Explorer implements Pointer Events specification which supports more input devices than Touch Events one.

There is a library on GitHub that is working toward bringing W3C touch events to IE 10 and 11: https://github.com/CamHenlin/TouchPolyfill

Removed support in Firefox refers to desktop Firefox only.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• ChromeDriver

Mobile emulation

Chrome allows users to emulate Chrome on a mobile device (such as a "Nexus 7" tablet or an "iPhone 5") from the desktop version of Chrome, by enabling the Mobile Emulation feature in Chrome DevTools . This feature speeds up web development, allows developers to quickly test how a website will render in a mobile device, without requiring a real device. ChromeDriver can also enable Mobile Emulation, via the "mobileEmulation" capability, specified with a dictionary value.

Just as in the DevTools Emulation panel, there are two ways in ChromeDriver to enable Mobile Emulation: by specifying a known device, or by specifying individual device attributes. The format of the "mobileEmulation" dictionary depends on which method is desired.

Specifying a Known Mobile Device

To enable Mobile Emulation with a specific device name, the "mobileEmulation" dictionary must contain a "deviceName." Use a valid device name from the DevTools Emulation panel as the value for "deviceName."

Specifying Individual Device Attributes

It is also possible to enable Mobile Emulation by specifying individual attributes. To enable Mobile Emulation this way, the "mobileEmulation" dictionary can contain "deviceMetrics" and "clientHints" dictionaries and a "userAgent" string. The following device metrics must be specified in the "deviceMetrics" dictionary:

• "width" - the width in pixels of the device’s screen
• "height" - the height in pixels of the device’s screen
• "pixelRatio" - the device’s pixel ratio
• "touch" - whether to emulate touch events. The value defaults to true and usually can be omitted.
• "mobile" - whether the browser must behave as a mobile user agent (overlay scrollbars, emit orientation events, shrink the content to fit the viewport, etc.). The value defaults to true and usually can be omitted.

The "clientHints" dictionary can have the following entries:

• "platform" - the operating system. It can be either a known value ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows"), that exactly matches the value returned by Chrome running on the given platform, or it can be a user defined value. This value is mandatory.
• "mobile" - whether the browser should request a mobile or desktop resource version. Usually Chrome running on a mobile phone with Android sets this value to true. Chrome on a tablet Android device sets this value to false. Chrome on a desktop device also sets this value to false. You can use this information to specify a realistic emulation. This value is mandatory.
• "brands" - list of brand / major version pairs. If omitted the browser uses its own values.
• "fullVersionList" - list of brand / version pairs. It omitted the browser uses its own values.
• "platformVersion" - OS version. Defaults to empty string.
• "model" - device model. Defaults to empty string.
• "architecture" - CPU architecture. Known values are "x86" and "arm". The user is free to provide any string value. Defaults to empty string.
• "bitness" - platform bitness. Known values are "32" and "64". The user is free to provide any string value. Defaults to empty string.
• "wow64" - emulation of windows 32 on windows 64. A boolean value that defaults to false.

ChromeDriver is capable to infer "userAgent" value from "clientHints" on the following platforms: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows". Therefore this value can be omitted.

If "clientHints" dictionary is omitted (legacy mode) ChromeDriver does its best to infer the "clientHints" from "userAgent". This functionality does not work reliably though due to internal ambiguities of "userAgent" value format.

The phones and tablets that are available under the Mobile Emulation panel can be found in the DevTools source code .

Example of full blown mobile emulation configuration:

Differences between mobile emulation and real devices

Testing a mobile website on a desktop using mobile emulation can be useful, but testers should be aware that there are many subtle differences such as:

• entirely different GPU, which may lead to big performance changes;
• mobile UI is not emulated (in particular, the hiding url bar affects page height);
• disambiguation popup (where you select one of a few touch targets) is not supported;
• many hardware APIs (for example, orientationchange event) are unavailable.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-01-08 UTC.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Element: touchmove event

The touchmove event is fired when one or more touch points are moved along the touch surface.

Use the event name in methods like addEventListener() , or set an event handler property.

A TouchEvent . Inherits from Event .

Event properties

This interface inherits properties from its parent, UIEvent and Event .

A Boolean value indicating whether or not the alt key was down when the touch event was fired.

A TouchList of all the Touch objects representing individual points of contact whose states changed between the previous touch event and this one.

A Boolean value indicating whether or not the control key was down when the touch event was fired.

A Boolean value indicating whether or not the meta key was down when the touch event was fired.

A Boolean value indicating whether or not the shift key was down when the touch event was fired.

A TouchList of all the Touch objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event.

A TouchList of all the Touch objects representing all current points of contact with the surface, regardless of target or changed status.

Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: 0.0 .

Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: 1.0 .

Code samples for those events are available on the dedicated page: Touch events .

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Touch events

Turn Your Curiosity Into Discovery

Latest facts.

Follistatin344 Peptide Considerations

Approach for Using 5 Tips To Help You Write Your Dissertation

40 facts about elektrostal.

Written by Lanette Mayes

Modified & Updated: 02 Mar 2024

Reviewed by Jessica Corbett

Elektrostal is a vibrant city located in the Moscow Oblast region of Russia. With a rich history, stunning architecture, and a thriving community, Elektrostal is a city that has much to offer. Whether you are a history buff, nature enthusiast, or simply curious about different cultures, Elektrostal is sure to captivate you.

This article will provide you with 40 fascinating facts about Elektrostal, giving you a better understanding of why this city is worth exploring. From its origins as an industrial hub to its modern-day charm, we will delve into the various aspects that make Elektrostal a unique and must-visit destination.

So, join us as we uncover the hidden treasures of Elektrostal and discover what makes this city a true gem in the heart of Russia.

Key Takeaways:

• Elektrostal, known as the “Motor City of Russia,” is a vibrant and growing city with a rich industrial history, offering diverse cultural experiences and a strong commitment to environmental sustainability.
• With its convenient location near Moscow, Elektrostal provides a picturesque landscape, vibrant nightlife, and a range of recreational activities, making it an ideal destination for residents and visitors alike.

Known as the “Motor City of Russia.”

Elektrostal, a city located in the Moscow Oblast region of Russia, earned the nickname “Motor City” due to its significant involvement in the automotive industry.

Home to the Elektrostal Metallurgical Plant.

Elektrostal is renowned for its metallurgical plant, which has been producing high-quality steel and alloys since its establishment in 1916.

Boasts a rich industrial heritage.

Elektrostal has a long history of industrial development, contributing to the growth and progress of the region.

Founded in 1916.

The city of Elektrostal was founded in 1916 as a result of the construction of the Elektrostal Metallurgical Plant.

Located approximately 50 kilometers east of Moscow.

Elektrostal is situated in close proximity to the Russian capital, making it easily accessible for both residents and visitors.

Known for its vibrant cultural scene.

Elektrostal is home to several cultural institutions, including museums, theaters, and art galleries that showcase the city’s rich artistic heritage.

A popular destination for nature lovers.

Surrounded by picturesque landscapes and forests, Elektrostal offers ample opportunities for outdoor activities such as hiking, camping, and birdwatching.

Hosts the annual Elektrostal City Day celebrations.

Every year, Elektrostal organizes festive events and activities to celebrate its founding, bringing together residents and visitors in a spirit of unity and joy.

Has a population of approximately 160,000 people.

Elektrostal is home to a diverse and vibrant community of around 160,000 residents, contributing to its dynamic atmosphere.

Boasts excellent education facilities.

The city is known for its well-established educational institutions, providing quality education to students of all ages.

A center for scientific research and innovation.

Elektrostal serves as an important hub for scientific research, particularly in the fields of metallurgy, materials science, and engineering.

Surrounded by picturesque lakes.

The city is blessed with numerous beautiful lakes, offering scenic views and recreational opportunities for locals and visitors alike.

Well-connected transportation system.

Elektrostal benefits from an efficient transportation network, including highways, railways, and public transportation options, ensuring convenient travel within and beyond the city.

Famous for its traditional Russian cuisine.

Food enthusiasts can indulge in authentic Russian dishes at numerous restaurants and cafes scattered throughout Elektrostal.

Home to notable architectural landmarks.

Elektrostal boasts impressive architecture, including the Church of the Transfiguration of the Lord and the Elektrostal Palace of Culture.

Offers a wide range of recreational facilities.

Residents and visitors can enjoy various recreational activities, such as sports complexes, swimming pools, and fitness centers, enhancing the overall quality of life.

Provides a high standard of healthcare.

Elektrostal is equipped with modern medical facilities, ensuring residents have access to quality healthcare services.

Home to the Elektrostal History Museum.

The Elektrostal History Museum showcases the city’s fascinating past through exhibitions and displays.

A hub for sports enthusiasts.

Elektrostal is passionate about sports, with numerous stadiums, arenas, and sports clubs offering opportunities for athletes and spectators.

Celebrates diverse cultural festivals.

Throughout the year, Elektrostal hosts a variety of cultural festivals, celebrating different ethnicities, traditions, and art forms.

Electric power played a significant role in its early development.

Elektrostal owes its name and initial growth to the establishment of electric power stations and the utilization of electricity in the industrial sector.

Boasts a thriving economy.

The city’s strong industrial base, coupled with its strategic location near Moscow, has contributed to Elektrostal’s prosperous economic status.

Houses the Elektrostal Drama Theater.

The Elektrostal Drama Theater is a cultural centerpiece, attracting theater enthusiasts from far and wide.

Popular destination for winter sports.

Elektrostal’s proximity to ski resorts and winter sport facilities makes it a favorite destination for skiing, snowboarding, and other winter activities.

Promotes environmental sustainability.

Elektrostal prioritizes environmental protection and sustainability, implementing initiatives to reduce pollution and preserve natural resources.

Home to renowned educational institutions.

Elektrostal is known for its prestigious schools and universities, offering a wide range of academic programs to students.

Committed to cultural preservation.

The city values its cultural heritage and takes active steps to preserve and promote traditional customs, crafts, and arts.

Hosts an annual International Film Festival.

The Elektrostal International Film Festival attracts filmmakers and cinema enthusiasts from around the world, showcasing a diverse range of films.

Encourages entrepreneurship and innovation.

Elektrostal supports aspiring entrepreneurs and fosters a culture of innovation, providing opportunities for startups and business development.

Offers a range of housing options.

Elektrostal provides diverse housing options, including apartments, houses, and residential complexes, catering to different lifestyles and budgets.

Home to notable sports teams.

Elektrostal is proud of its sports legacy, with several successful sports teams competing at regional and national levels.

Boasts a vibrant nightlife scene.

Residents and visitors can enjoy a lively nightlife in Elektrostal, with numerous bars, clubs, and entertainment venues.

Promotes cultural exchange and international relations.

Elektrostal actively engages in international partnerships, cultural exchanges, and diplomatic collaborations to foster global connections.

Surrounded by beautiful nature reserves.

Nearby nature reserves, such as the Barybino Forest and Luchinskoye Lake, offer opportunities for nature enthusiasts to explore and appreciate the region’s biodiversity.

Commemorates historical events.

The city pays tribute to significant historical events through memorials, monuments, and exhibitions, ensuring the preservation of collective memory.

Promotes sports and youth development.

Elektrostal invests in sports infrastructure and programs to encourage youth participation, health, and physical fitness.

Hosts annual cultural and artistic festivals.

Throughout the year, Elektrostal celebrates its cultural diversity through festivals dedicated to music, dance, art, and theater.

Provides a picturesque landscape for photography enthusiasts.

The city’s scenic beauty, architectural landmarks, and natural surroundings make it a paradise for photographers.

Connects to Moscow via a direct train line.

The convenient train connection between Elektrostal and Moscow makes commuting between the two cities effortless.

A city with a bright future.

Elektrostal continues to grow and develop, aiming to become a model city in terms of infrastructure, sustainability, and quality of life for its residents.

In conclusion, Elektrostal is a fascinating city with a rich history and a vibrant present. From its origins as a center of steel production to its modern-day status as a hub for education and industry, Elektrostal has plenty to offer both residents and visitors. With its beautiful parks, cultural attractions, and proximity to Moscow, there is no shortage of things to see and do in this dynamic city. Whether you’re interested in exploring its historical landmarks, enjoying outdoor activities, or immersing yourself in the local culture, Elektrostal has something for everyone. So, next time you find yourself in the Moscow region, don’t miss the opportunity to discover the hidden gems of Elektrostal.

Q: What is the population of Elektrostal?

A: As of the latest data, the population of Elektrostal is approximately XXXX.

Q: How far is Elektrostal from Moscow?

A: Elektrostal is located approximately XX kilometers away from Moscow.

Q: Are there any famous landmarks in Elektrostal?

A: Yes, Elektrostal is home to several notable landmarks, including XXXX and XXXX.

Q: What industries are prominent in Elektrostal?

A: Elektrostal is known for its steel production industry and is also a center for engineering and manufacturing.

Q: Are there any universities or educational institutions in Elektrostal?

A: Yes, Elektrostal is home to XXXX University and several other educational institutions.

Q: What are some popular outdoor activities in Elektrostal?

A: Elektrostal offers several outdoor activities, such as hiking, cycling, and picnicking in its beautiful parks.

Q: Is Elektrostal well-connected in terms of transportation?

A: Yes, Elektrostal has good transportation links, including trains and buses, making it easily accessible from nearby cities.

Q: Are there any annual events or festivals in Elektrostal?

A: Yes, Elektrostal hosts various events and festivals throughout the year, including XXXX and XXXX.

Was this page helpful?

Our commitment to delivering trustworthy and engaging content is at the heart of what we do. Each fact on our site is contributed by real users like you, bringing a wealth of diverse insights and information. To ensure the highest standards of accuracy and reliability, our dedicated editors meticulously review each submission. This process guarantees that the facts we share are not only fascinating but also credible. Trust in our commitment to quality and authenticity as you explore and learn with us.

Share this Fact: