HTML5技术

AlloyTouch Button插件-不再愁click延迟和点击态 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2016-12-14 10:00 我要评论( )

移动端不能使用click,因为click会有300ms。所有有了fastclick这样的解决方案。然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题。hover会有不消失的问题,所有大家一般用:active。利用 :active 伪类来设置某元素被点击时的点

移动端不能使用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事件。

  • touchMove、touchEnd和touchCancel均会移除active的class。
  • toucStart会增加active的class。
  • 最后

    更多例子演示和代码可以在Github上找到。
    Github:https://github.com/AlloyTeam/AlloyTouch
    

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 一分钟搞定AlloyTouch图片轮播组件 - 【当耐特】

      一分钟搞定AlloyTouch图片轮播组件 - 【当耐特】

      2016-12-12 14:01

    • AlloyTouch与three.js 3D模型交互 - 【当耐特】

      AlloyTouch与three.js 3D模型交互 - 【当耐特】

      2016-12-08 10:00

    • 移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

      移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

      2016-12-07 15:00

    • 在ionic/cordova中使用百度地图插件 - LarryNE

      在ionic/cordova中使用百度地图插件 - LarryNE

      2016-11-20 13:00

    网友点评