FastClick用法

JavaScript019

FastClick用法,第1张

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。

项目地址: https://github.com/ftlabs/fastclick

安装fastclick可以使用npm,Component和Bower。另外也提供了Ruby版的gem fastclick-rails 以及.NET提供了 NuGet package 。最直接的可以在页面引入fastclick js文件。如:

在页面直接引入fastclick.js

使用npm安装

初始化FastClick实例建议在页面的DOM文档加载完成后。

纯Javascript版

jQuery版

类似Common JS的模块系统方式

调用require('fastclick')会返回FastClick.attach函数。

如果页面上有一些特定的元素不需要使用fastclick来立刻触发点击事件,可以在元素的class上添加needsclick:

以下这几种情况是不需要使用fastclick:

1、FastClick是不会对PC浏览器添加监听事件

2、Android版Chrome 32+浏览器,如果设置viewport meta的值为width=device-width,这种情况下浏览器会马上出发点击事件,不会延迟300毫秒。

3、所有版本的Android Chrome浏览器,如果设置viewport meta的值有user-scalable=no,浏览器也是会马上出发点击事件。

4、IE11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件,IE10的为-ms-touch-action: manipulation

参考: https://github.com/ftlabs/fastclick

什么是Web前端开发?

前端开发是创建web页面或app等前端界面呈现给用户的过程。通过html、css、js以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户交互界面。

Web前端框架有:Bootstrap 框架、React 框架、Vue 框架、Angular 框架、Foundation 框架、TypeScript 框架。

1、Bootstrap 框架

Bootstrap 是当今可用的前端框架中最受欢迎的,它具有直观,时尚的界面而且功能强大可以更快更轻松地实现 web 开发而且不需要捆绑。附件就可以使用许多第三方插件,大多数浏览器都支持它,而且它提供了比其他前端框架更多的组合资源。

2、React 框架

React 框架引入了许多自定义的(在创建时)前端 Web 开发的方法。要使用 React,首先需要掌握组件的体系结构,JSX 和单向数据流等,React 框架的出现促使开发了大量额外工具用来实现高度灵活性。虽然灵活性是其主要优势,但 React 因其灵活性也存在一些问题。比如在使用 React 时会面临选择的问题,而且它没有可靠的开发工作流程。我们必须使用 React 构建自己的工作流程。这比使用其他 JS 框架更困难,因为构建到框架中需要大量的开发工具。

3、Vue 框架

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

4、Angular 框架

Angular.js 通常被称为 MVW(模型 – 视图 – 随意)框架,其中包括:快速代码生成,轻松测试任何应用程序部分和双向数据绑定(后端的更改会立即反映在 UI 上)。自发布以来,它成为开发的最常用的 JS 框架。对于基于企业的应用程序或具有高标准代码可读性的严格编程环境,Angular-s 都是更好的选择。

5、Foundation 框架

Foundation 是由网页设计公司 Zurb 创建的,是一个非常先进的企业级前端框架,非常适合开发灵活,响应迅速的网站。但是使用它也相当复杂,所以不适合刚入门的学习者,这个功能丰富的框架支持 GPU 加速,可实现流畅,闪电般快速的动画,Fastclick.js 可在移动设备上快速渲染。它在 Sass 预处理器上运行,并包含 Foundation 开发的数据交换属性,该属性允许您为移动设备加载轻量级 HTML 部分,为较大屏幕加载“较重”HTML 部分。

6、TypeScript 框架

TypeScript 是由微软开发的自由和开源的编程语言,JavaScript 类型的超集,它可以编译成纯 JavaScript。TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。

onclick=function(){changeAColor(\''+$(this).attr(aCode)+'\',this,\''+item+'\')contentList()}