Touch.js

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.(已停更)

Touch.js手势库专为移动设备设计,是Web移动端touch点击事件不错的解决方案

GitHub - Clouda-team/touchjs: Touchjs getsture library

用法:

//引入touchjs
<script src="js/touch-0.2.14.min.js"></script>

    /*
	    touch.on(1,2,3)
        三个参数:
	    1、DOM元素
	    2、移动端事件
	    3、处理函数
     */

var oBox = document.getElementsByTagName('div')[0];

touch.on(oBox, 'tap', function(e) {
     this.style.background = "red";
     this.style.color = '#fff'; 
});

hammer.js

一款开源的移动端脚本框架,他能完美的实现在移端开发的大多数事件,如点击、滑动、拖动、多点触控等事件

Getting Started - Hammer.js

用法:

//引入hammer文件
<script src="js/hammer.min.js"></script>

<script>
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
    var hammertime = new Hammer(document.getElementById("test"));

    //添加事件
    // tap、swipe、rotate、press、pinch、pan等事件
    hammertime.on("tap", function(e) {

        document.getElementById("result").innerHTML += "点击触发了,长按无效<br />";

        //控制台输出,可以自行查看相关的参数
        console.log(e);
    });

</script>

支持移动端事件(部分)

属性 设备类型
tap 单击屏幕
doubletap 双击屏幕
swipe 滑动
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
hold 长按屏幕
dragstart 拖动开始
drag 拖动
pinchstart 缩放手势起点
pinchin 缩小
pinchout 放大

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐