(Obsolete) Provides immediate visual feedback on touch for native-feeling web apps
This is a small jquery plugin that allows you to easily bind to the touch or click events depending on what's available for the given platform. Unlike similar scripts, this also provides immediate visual feedback on touch platforms -- just as native apps do.
Include the touchclick.js file on the page after jquery, or require it with browserify.
Bind to the touchclick event where you would have otherwise used click or touchend
$(".menu-btn").on("touchclick", function () {
console.log("अनित्य");
});
.menu.btn.touchactive {
color: #eee;
background-color: #333;
}
* {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<div class="menu btn" data-touchclick="true">Menu</div>
Binding to touchend or using a script such as fastclick will remove the delay for triggering the event. However, unlike touchclick, they do not provide immediate visual feedback as native apps do.
Binding to touchend or using fastclick will remove the delay and provide some visual feedback. However, unlike touchclick and most native apps, when the user removes their finger from the element the :hover style sticks. While subtle, this still leaves web apps with a somewhat laggy feel.
Some browsers will add a large translucent overlay when items are tapped. However you do not have control over the exact style of an actively pressed element. This typically ends up looking a bit janky.
Copyright (c) 2015, Derek Petersen
Licensed under the MIT license.