w3school 在线教程
领先的 Web 技术教程 - 全部免费
在 w3school，你可以找到你所需要的所有的网站建设教程。
从基础的 HTML 到 CSS，乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。
从左侧的菜单选择你需要的教程！
完整的网站技术参考手册
我们的参考手册涵盖了网站技术的方方面面。
其中包括W3C的标准技术：HTML、CSS、XML 。以及其他的技术，诸如JavaScript、PHP、SQL等等。
在线实例测试工具
在w3school，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
从何入手？
什么是一个Web建设者需要学习的知识呢？
W3School将为您回答这个问题，在您成为专业Web开发者的路上助一臂之力，从而更好地应对未来的挑战。
如果您是初学者，请您阅读《》。
如果您是开发者，请您阅读《》。
W3School 新闻
已上线，敬请批评指正。
W3School 更新信息
W3School 友情链接JavaScript教程网 - 分享个人的JavaScript学习经历
推荐JavaScript教程
焦点图、全屏广告、对联广告、在线客服、相册代码、菜单导航、TAB标签、悬浮漂浮、视频播放、图片特效、翻牌书角等等。
这是一个JavaScript的基本教程，它从零开始说起，为大家提供逐步的学习过程！本教程为未接触过js脚本的读者提供了比较完善的初级知识。
张孝祥的Javascript视频教程。教程中用到的代码网上可以找到。本教程从HTML基础入门讲解到JvaaScript高级进阶，不失为一套好的入门Javascript视频教程。
JavaScript教程
JavaScript验证
JavaScript手册
JavaScript特效
Jquery框架
推荐JavaScript教程前端（238）
一直在写jQuery的源码教程，都没时间研究别的框架了。Hammer是我项目御用的一个手势库，早期1.x版本的swipe事件的响应不灵敏的问题而改过源码，2.x就已经更正过来，而且源码的结构也整个翻新了一遍，不管从逻辑还是组织结构上，我个人都觉得有必要深入，所以就当作一个系列教程一起学习吧。
本章主要讲解下使用，因为官方的API都是英文的，中文资料也相对较少，源码的分析后续再更新。
通过网方的教程还是有很多地方不是很明白的，可能需要后期看源码才能弄懂了。
是一个专门用于控制、定制手势的JavaScript库。它可以识别出常见的触摸、拖动、长按、缩放等等，对于希望在网页上对手势有所处理的朋友们，应该很有帮助。
官方也表明了2.0版本是完全重写,包括手势识别器、和改进支持最近的移动浏览器利用touch-action css属性。同时还支持多种设备,所以多用户成为可能。功能上更加强大了
使用上很简单，引入源码并且创建一个实例。
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
console.log(ev);
默认设置下自动添加了，tap、doubletap、press，pan与swipe的横向滑动，多点触摸pinch与rotate手势。
pinch和rotate识别器在默认情况下都是禁用的,因为他们会有元素阻塞,但是我们可以手动开启：
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
当然，我们还可以为pan与swipe 开启纵向滑动
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL
我们能通过meta的标记，禁用doubletap /触控放大。但是新的浏览器支持touch-action属性所以可以不需要这个
&meta name=&viewport& content=&user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1&&
1.基本的实现
绑定一个简单的swipe事件，通过回调得到事件的响应
var mc = new Hammer(el);
mc.on('swipe',function(evt){
console.log(evt)
2.改变事件处理的方向
但是默认情况下Hammer是屏蔽了上下滑动的响应的，所以我们如果只指竖向响应，就需要再配置中设置
mc.get('pan').set({
direction: Hammer.DIRECTION_VERTICAL
mc.on('swipe',function(evt){
console.log(evt)
我们还可以同时响应横向与竖向，除此之外，还可以单独为某个指定的识别器配置
var mc = new Hammer(el);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
mc.on('swipe pan',function(evt){
console.log(evt)
通过get方法我们可以得到指定对应的识别器，我们这里只给swipe启动了上下左右滑动的响应，那么pan事件则没开启，这种指定特定事件的处理相当的灵活
当然以上都是比较简单常见的事件处理，如果在一个元素上绑定多个不同的事件处理，那可以引入Hammer.Manager控制了
3.Hammer.Manager
我们可以通过这个Manager设置自己的识别器的实例。可以设置更多的被识别的手势。
一个复杂的多事件处理的Example&
var mc = new Hammer.Manager(myElement, myOptions);
mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );
mc.on(&pan&, handlePan);
mc.on(&quadrupletap&, handleTaps);
上面的示例创建一个实例包含一个pan和一个quadrupletap手势
当然如果我们同时给一个元素上 绑定多个事件用new Hammer(el);直接通过on方法也是可以实现的
但是实际上的测试效果，识别度与灵活度比Hammer.Manager低很多。
因为Manager控制里面，引入了recognizeWith与用来关联2个相近的事件，从而提高可用性
var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotation();
pinch.recognizeWith(rotate);
当然具体内部如何实现，要等以后源码分解才知道了。官方给的说明确实太少了
最后官方还提到提供一个神秘hammer.input事件，在每一次有用户交互的时候都会被触发，可以得到非常有用的数据
hammertime.on(&hammer.input&, function(ev) {
console.log(ev.pointers);
除此之外，还有很多参数的
比如事件对象，Directions方向，输入动作Input Events，识别器状态等等
提供的方法Utils
类似addEventListener的事件绑定与销毁
Hammer.on(window, &load resize scroll&, function(ev) {
console.log(ev.type);
Hammer.each([10,20,30,40], function(item, index, src) { });
var options = {
var defaults = {
c: [1,2,3]
Hammer.merge(options, defaults);
// options.a == true
// options.b == false
// options.c == [1,2,3]
extend，inherit，bindFn等等
hammerjs确实很强大，做了市面上大多数的设备的适配，我可以看到源码中关于适配的代码就接近一半，整个源码的结构其实也是比较规整的
大多数人能用1,2步的处理就已经完全足够了，但是这都不是重点，重点是我们要的不是使用，而且能够“造轮子”弄懂原理！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：787388次
积分：10190
积分：10190
排名：第1075名
原创：245篇
转载：401篇
评论：165条
(2)(5)(6)(1)(4)(25)(21)(12)(12)(16)(6)(22)(33)(20)(31)(10)(4)(5)(19)(10)(4)(14)(16)(11)(24)(8)(63)(19)(25)(22)(44)(13)(7)(15)(15)(22)(14)(41)(11)}