移动端不能使用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延迟和点击态的更多相关文章

  1. 聊聊click延迟和点击穿透

    博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 如需转载,请在文章开头注明原文地址 移动端click事件被延迟 移动端的开发经常需要监听用户的双击行为,所 ...

  2. Bootstrap 按钮(Button)插件加载状态

    通过按钮(Button)插件,您可以添加进一些交互.比如控制按钮的状态.或者为其它组件(工具栏)创建按钮组. 加载状态 如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loa ...

  3. JS click延迟解决方案

    click延迟解决方案     移动端click事件会有300ms的延迟,原因是移动端屏幕双击会缩放页面 1.禁止缩放功能 浏览器禁用默认双击缩放行为去掉300ms的点击延迟 user-scalabl ...

  4. extjs的button控件fireEvent('click')无效问题

    extjs的button控件fireEvent('click')无效问题 2012-06-06 16:39 891人阅读 评论(0) 收藏 举报 extjsbuttoncallbackfunction ...

  5. Bootstrap历练实例:按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  6. Click Magick – 下一代点击跟踪和链接管理

    Click Magick 是新一代的广告跟踪和链接管理系统,让每一个点击都能给你带去更多的利润.它是专门设计来跟踪所有类型的点击计费广告,包括从谷歌,必应和 Facebook 的 PPC 广告,就好像 ...

  7. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  8. jquery click()方法模拟点击事件对a标签不生效

    if(e.keyCode == 13) { $items.eq(index).click(); return; } 搜索框下拉列表模拟点击时间,使用上述代码不能触发链接跳转 1,页面使用了bootst ...

  9. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

随机推荐

  1. 在 Windows7 上按照 MySQL5.7

    在 Windows7 上按照 MySQL5.7 1.从官网下载最新版本的 MySQL,这里下载的是 mysql-5.7.17-win32: 2.将下载的 mysql-5.7.17-win32.zip ...

  2. VS2015 Git 源码管理工具简单入门

    1.VS Git插件 1.1 环境 VS2015+GitLab 1.2 Git操作过程图解 1.3 常见名词解释 拉取(Pull):将远程版本库合并到本地版本库,相当于(Fetch+Meger) 获取 ...

  3. Vue.js——60分钟组件快速入门(下篇)

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  4. [C#版本]有趣啊!各种编程语言实现 2 + 2 = 5

    首页新闻里面那个 [新闻头条]有趣啊!各种编程语言实现 2 + 2 = 5 其他的就不评论的,但是其中C#版的 真是逗比啊...评论中各种吐槽有木有... static void Main (stri ...

  5. NET Core-学习笔记(一)

    .net core最近园子讨论频率很高的话题,从不久前发布正式版本后,也是开始从netcore官网一步一步走向学习之路:.net跨平台的设计让人很是兴奋起来,因为做了多年的互联网研发者,见识了很多一流 ...

  6. Ubuntu 下安装QT

    Ubuntu 下安装QT 本文使用的环境 QT Library: qt-everywhere-opensource-src-4.7.4.tar.gz QT Creator: qt-creator-li ...

  7. (转)ubuntu apache2 的负载均衡和反向代理

    apache功能其实很是强大,最近一段时间研究了下apache的反向代理和负载均衡,反向代理网协的外网出口和我的博客出口就是通过apache的反向代理实现的,总结一下,重点说说负载均衡的配置. 首先说 ...

  8. 新年抢红包效果(New Year Red Packet)

    新年抢红包效果(New Year Red Packet) 晓娜的文章(微信公众号:migufe) 2016即将过去,我们将迎来新的一年2017,这里小编提前祝大家新年快乐!万事如意!那我们新年最开心的 ...

  9. Java进击C#——应用开发之Linq和EF

    本章简言 上一章笔者对于WinForm开发过程用到的几个知识点做了讲解.笔者们可以以此为开端进行学习.而本章我们来讲一个跟ORM思想有关的知识点.在讲之前让我们想一下关于JAVA的hibernate知 ...

  10. Node基础篇(概要)

    Node简介 客户端的JavaScript是怎样的 什么是 JavaScript? 脚本语言 运行在浏览器中 一般用来做客户端页面的交互(Interactive) JavaScript 的运行环境? ...