How to Implement Responsive Touch Feedback on Mobile Web Pages
This article explains three methods to provide visual touch feedback on mobile web pages—using the :active pseudo‑class with a touchstart handler, the non‑standard -webkit‑tap‑highlight‑color property, and custom touch event listeners that add and remove an active class, plus tips for handling the 300 ms delay.
When developing mobile pages, adding a visual feedback effect to touchable elements improves user experience.
There are three main ways to achieve this feedback:
:active pseudo-class The pseudo-class works conveniently, but on iOS you must bind a touchstart event to the element or the body for :active to take effect.
By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the .— MDN
document.body.addEventListener('touchstart', function(){});You can also add a touchstart attribute directly on the <body> element.
<body touchstart>
<!-- ... -->
</body>Because of the 300 ms delay on mobile browsers, touch feedback may be delayed; using FastClick can solve this.
webkit-tap-highlight-color This non‑standard property sets the highlight color when a link is tapped. On iOS it appears as a semi‑transparent gray overlay; you can set any color, e.g., rgba(0,0,0,0.5). An alpha of 0 disables the highlight, while 1 makes the element invisible on tap. Most Android devices support it too, but display it as a border whose color matches the property value.
touch events The principle is to add a class on touchstart and remove it on touchend.
<!-- omitted -->
<li data-touch="true">点我</li>
<!-- omitted -->
<script>
document.body.addEventListener('touchstart', function(e){
var target = e.target;
if (target.dataset.touch === 'true'){
target.classList.add('active');
}
});
document.body.addEventListener('touchmove', function(e){
var target = e.target,
rect = target.getBoundingClientRect();
if (target.dataset.touch === 'true'){
// when moving out of element, cancel active state
if (e.changedTouches[0].pageX < rect.left ||
e.changedTouches[0].pageX > rect.right ||
e.changedTouches[0].pageY < rect.top ||
e.changedTouches[0].pageY > rect.bottom){
target.classList.remove('active');
}
}
});
document.body.addEventListener('touchcancel', function(e){
var target = e.target;
if (target.dataset.touch === 'true'){
target.classList.remove('active');
}
});
document.body.addEventListener('touchend', function(e){
var target = e.target;
if (target.dataset.touch === 'true'){
target.classList.remove('active');
}
});
</script>Click the link to view the original demo.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JavaScript
Provides JavaScript enthusiasts with tutorials and experience sharing on web front‑end technologies, including JavaScript, Node.js, Deno, Vue.js, React, Angular, HTML5, CSS3, and more.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.