touchFeedback.js
is a library for touch feedback in
mobile browsers;All functions are realized only in 2kb;
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
.
- 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
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>
new TouchFeedback(selector, option);
- feedbackClass {String}: Define the class that needs to be added or removed when the feedback is triggered.
var feedback = new TouchFeedback(selector, option);
feedback.destory();
- destory: destory the listener
- fixed bug: If
bindprop
element have any children , addClass will disabled.
- fixed bug:
destory
unuseful.
- fixed bug: Touch the wrapper's area will report errors.
- add: Multi-touch has been supported.
- bixed bug:now support class
<script>
new TouchFeedback(".abc");
</script>
Released under the MIT, BSD, and GPL Licenses