Optimizing Touch Events for Mobile
When working on mobile devices, it is beneficial to write your own functions for specific tasks instead of relying on libraries like Angular or jQuery, as they can lead to performance issues.
All you really need are these event listeners:
document.addEventListener('touchstart', ts, false);
document.addEventListener('touchmove', tm, false);
document.addEventListener('touchend', te, false);
To test the functionality, add these mouse event listeners as well:
document.addEventListener('mousedown', ts, false); // set mouseIsDown to true
document.addEventListener('mousemove', tm, false); // check if mouse is down
document.addEventListener('mouseup', te, false); // set mouseIsDown to false
Improving CSS Performance
Utilize translate3d() in CSS, as it triggers hardware acceleration on the GPU, enhancing performance over using translate().
While your question lacks specificity at the moment, here are some touch/mouse movement examples that may be helpful:
Swipe & fastclick
http://jsfiddle.net/uRFcN/
Radial Menu
http://jsfiddle.net/yX82S/
Slider
http://jsfiddle.net/LxX34/11/
Some UI elements
Feel free to try swiping the main content or dragging left and right with a mousedown action.
For detailed code samples, visit:
Additionally, there's a CSS trick that enables native scrolling without affecting the entire page layout, eliminating the need for external libraries:
CSS
.scrollable {
-webkit-overflow-scrolling: touch;
}
.scrollable,
.scrollable>div {
width: 100%;
height: 100%;
overflow: auto;
}
.scrollable>div>div {
min-height: 101%;
}
HTML
<div class="scrollable"><div><div></div></div></div>