移动端不能使用click,因为click会有300ms。所有有了fastclick这样的解决方案。然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题。hover会有不消失的问题,所有大家一般用:active。利用 :active 伪类来设置某元素被点击时的点击态样式。
在IOS上使用active必须声明下面js:
() {},false);
CSS中记得去掉highlight color:
);
需要注意的是:Android 2.x 仍不支持:active。
那么就 fastclick + :active + 一堆声明 + 放弃部分系统的兼容?
有没有更好的解决方案?且看AlloyTouch Button插件~~
语法new AlloyTouch.Button(selector, onTap [,activeClass])
使用方式() );
在线演示 原理(selectorselector .selectortap(active .( ) touchMove (element.( ) .() (option); }
在创建Button对象实例的时候,其实创建了AlloyTouch对象实例。这里分析在option。
当用户传入了active参数时候,分别给绑定了touchMove、toucStart、touchEnd和touchCancel事件。
更多例子演示和代码可以在Github上找到。
Github:https://github.com/AlloyTeam/AlloyTouch