touchFeedback.js - lightWeight JavaScript library

touchFeedback.js is a library for touch feedback in mobile browsers;All functions are realized only in 2kb;

index

intro
feature
quick-start
api
download
licenses

intro

For touch feedback,the most used way is active pseudo class and HTML Anchor Element (<a>).But after testing,both way has some problems.The most obvious problem is feedback delay(just like click delay).You can avoid this problem by adding & removing Class.If you can't tolerate this delay, try touchFeedback.

feature

Supports all modern mobile browsers
Eliminate the 300ms delay between a physical tap and the firing of a touch feedback on mobile browsers.
easy to use
small size

quick-start

Initialize the feedback listener

You should specify one or more element as a listener.These elements will be trigger feedback if these have "data-touchFeedback" attribute.

<style>
    .touch {
        height: 100px;
        background: #699f00;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        color: #fff;
    }
    .touch.feedback {
        background: #38f;
    }
</style>
<div class="wrapper">
    <div class="touch" data-touchFeedback="true">touch me</div> <!-- this element will trigger feedback -->
</div>
<script>
    // new TouchFeedback('body'); global listener
    new TouchFeedback('.wrapper'); // only listen this element and this element's children
</script>

demo

api

Initialization

new TouchFeedback(selector, option);

option

feedbackClass {String}: Define the class that needs to be added or removed when the feedback is triggered.

method

var feedback = new TouchFeedback(selector, option);
feedback.destory();

destory: destory the listener

download

source

licenses

Released under the MIT, BSD, and GPL Licenses

zzuieliyaoli/touchFeedback