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

使用方法:

<script src=<span class="string" style="color: rgb(221, 17, 68);">"http://eightmedia.github/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/hammer.js/jquery.hammer.js"></script>span> $("#element") .hammer({ // 对DOM进行一些初始化,这里可以加入一些参数 }) .bind("tap", function(ev) { console.log(ev); });

更多推荐

多点触控插件Hammer.js