AlloyTouch Button插件-不再愁click延迟和点击态
移动端不能使用click,因为click会有300ms。所有有了fastclick这样的解决方案。然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题。hover会有不消失的问题,所有大家一般用:active。利用 :active 伪类来设置某元素被点击时的点击态样式。
在IOS上使用active必须声明下面js:
document.addEventListener("touchstart", function() {},false);
CSS中记得去掉highlight color:
-webkit-tap-highlight-color: rgba(0,0,0,0);
需要注意的是:Android 2.x 仍不支持:active。
那么就 fastclick + :active + 一堆声明 + 放弃部分系统的兼容?
有没有更好的解决方案?且看AlloyTouch Button插件~~
语法
new AlloyTouch.Button(selector, onTap [,activeClass])
- selector:需要变成按钮的选择器
- onTap: 用户点击按钮的回调函数
- activeClass:可选参数,点击状态下添加的class
使用方式
new AlloyTouch.Button("#button", function () {
console.log("You tapped me.");
}, "active");
在线演示
原理
AlloyTouch.Button = function (selector, tap, active) {
var element = typeof selector === "string" ? document.querySelector(selector) : selector;
var option = {
touch: selector,
tap: tap,
preventDefault: false
};
if (active !== undefined) {
option.touchStart = function ( ) {
addClass(element, active);
};
touchMove = function ( ) {
removeClass(element, active);
};
option.touchEnd = function ( ) {
removeClass(element, active);
};
option.touchCancel = function () {
removeClass(element, active);
};
}
new AlloyTouch(option);
}
在创建Button对象实例的时候,其实创建了AlloyTouch对象实例。这里分析在option。
- touch: selector 需要变成按钮的的对象
- tap: tap 直接把创建button的tap传给alloytouch的tap
- preventDefault: false 不阻止默认事件。不然的话,手指放在button上时,页面拖不动。
当用户传入了active参数时候,分别给绑定了touchMove、toucStart、touchEnd和touchCancel事件。
- touchMove、touchEnd和touchCancel均会移除active的class。
- toucStart会增加active的class。
最后
更多例子演示和代码可以在Github上找到。
Github:https://github.com/AlloyTeam/AlloyTouch
AlloyTouch Button插件-不再愁click延迟和点击态的更多相关文章
- 聊聊click延迟和点击穿透
博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 如需转载,请在文章开头注明原文地址 移动端click事件被延迟 移动端的开发经常需要监听用户的双击行为,所 ...
- Bootstrap 按钮(Button)插件加载状态
通过按钮(Button)插件,您可以添加进一些交互.比如控制按钮的状态.或者为其它组件(工具栏)创建按钮组. 加载状态 如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loa ...
- JS click延迟解决方案
click延迟解决方案 移动端click事件会有300ms的延迟,原因是移动端屏幕双击会缩放页面 1.禁止缩放功能 浏览器禁用默认双击缩放行为去掉300ms的点击延迟 user-scalabl ...
- extjs的button控件fireEvent('click')无效问题
extjs的button控件fireEvent('click')无效问题 2012-06-06 16:39 891人阅读 评论(0) 收藏 举报 extjsbuttoncallbackfunction ...
- Bootstrap历练实例:按钮(Button)插件单个切换
单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...
- Click Magick – 下一代点击跟踪和链接管理
Click Magick 是新一代的广告跟踪和链接管理系统,让每一个点击都能给你带去更多的利润.它是专门设计来跟踪所有类型的点击计费广告,包括从谷歌,必应和 Facebook 的 PPC 广告,就好像 ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- jquery click()方法模拟点击事件对a标签不生效
if(e.keyCode == 13) { $items.eq(index).click(); return; } 搜索框下拉列表模拟点击时间,使用上述代码不能触发链接跳转 1,页面使用了bootst ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
随机推荐
- 在 Windows7 上按照 MySQL5.7
在 Windows7 上按照 MySQL5.7 1.从官网下载最新版本的 MySQL,这里下载的是 mysql-5.7.17-win32: 2.将下载的 mysql-5.7.17-win32.zip ...
- VS2015 Git 源码管理工具简单入门
1.VS Git插件 1.1 环境 VS2015+GitLab 1.2 Git操作过程图解 1.3 常见名词解释 拉取(Pull):将远程版本库合并到本地版本库,相当于(Fetch+Meger) 获取 ...
- Vue.js——60分钟组件快速入门(下篇)
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- [C#版本]有趣啊!各种编程语言实现 2 + 2 = 5
首页新闻里面那个 [新闻头条]有趣啊!各种编程语言实现 2 + 2 = 5 其他的就不评论的,但是其中C#版的 真是逗比啊...评论中各种吐槽有木有... static void Main (stri ...
- NET Core-学习笔记(一)
.net core最近园子讨论频率很高的话题,从不久前发布正式版本后,也是开始从netcore官网一步一步走向学习之路:.net跨平台的设计让人很是兴奋起来,因为做了多年的互联网研发者,见识了很多一流 ...
- Ubuntu 下安装QT
Ubuntu 下安装QT 本文使用的环境 QT Library: qt-everywhere-opensource-src-4.7.4.tar.gz QT Creator: qt-creator-li ...
- (转)ubuntu apache2 的负载均衡和反向代理
apache功能其实很是强大,最近一段时间研究了下apache的反向代理和负载均衡,反向代理网协的外网出口和我的博客出口就是通过apache的反向代理实现的,总结一下,重点说说负载均衡的配置. 首先说 ...
- 新年抢红包效果(New Year Red Packet)
新年抢红包效果(New Year Red Packet) 晓娜的文章(微信公众号:migufe) 2016即将过去,我们将迎来新的一年2017,这里小编提前祝大家新年快乐!万事如意!那我们新年最开心的 ...
- Java进击C#——应用开发之Linq和EF
本章简言 上一章笔者对于WinForm开发过程用到的几个知识点做了讲解.笔者们可以以此为开端进行学习.而本章我们来讲一个跟ORM思想有关的知识点.在讲之前让我们想一下关于JAVA的hibernate知 ...
- Node基础篇(概要)
Node简介 客户端的JavaScript是怎样的 什么是 JavaScript? 脚本语言 运行在浏览器中 一般用来做客户端页面的交互(Interactive) JavaScript 的运行环境? ...