多点触控插件Hammer.js

插件描述：Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。

使用方法：

<script src=<span class="string" style="color: rgb(221, 17, 68);">"http://eightmedia.github.com/hammer.js/hammer.js"</span>></script>

<span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 先要对监听的DOM进行一些初始化

<span class="keyword" style="font-weight: bold;">var hammer = new Hammer(document.getElementById("container"span>));

<span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 然后加入相应的回调函数即可

hammer.ondragstart = function(ev) { };  <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 开始拖动

hammer.ondrag = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动中

hammer.ondragend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动结束

hammer.onswipe = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 滑动

hammer.ontap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 单击

hammer.ondoubletap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//双击

hammer.onhold = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 长按

hammer.ontransformstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张开始

hammer.ontransform = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张中

hammer.ontransformend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张结束

hammer.onrelease = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 手指离开屏幕

还支持jQuery插件的形式调用

<span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>span>

$("#element")

   .hammer({

        // 对DOM进行一些初始化，这里可以加入一些参数

   })

   .bind("tap", function(ev) {

        console.log(ev);

   });

巴特西

多点触控插件Hammer.js

使用方法：

最新文章

热门文章