JavaScript触屏滑动API介绍

全栈程序员-站长 • 2021年12月28日上午8:00 • 未分类 • 阅读 38

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

随着触屏手机、平板电脑的普及和占有更多用户和使用时间，触屏的触碰、滑动等事件也成为javaScript开发不可避免的知识，现在何问起就和大家一起学习js的触屏操作，js的触屏touchmove事件，为手指在屏幕上滑动处罚的事件，这里制作了一个简单的示例，可以通过这个示例认识touchmove事件。

效果展示 http://hovertree.com/texiao/mobile/12/

手机或者其他触屏设备扫描二维码体验效果：
JavaScript触屏滑动API介绍

本示例弹出的Touch事件请参考：http://hovertree.com/jsdoc/touch.htm

使用三个手指一起滑动的效果图如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>js触屏touchmove手势事件_何问起</title><base target="_blank" />
    <meta charset="utf-8">
    <style>#hovertreechuping{min-width:300px;min-height:300px;background-color:darkgreen;color:white;text-align:center;line-height:50px;}
        .hovertreeinfo {text-align:center;
        }.hovertreeinfo a{color:blue;}
    </style>
</head>
<body>
    <div id="hovertreechuping">何问起提示：请在本区域内触摸滑动手指。请使用手机等触屏设备。可以使用一个手指滑动，也可以使用多跟手指滑动。</div>

    <div class="hovertreeinfo"><a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>
<a href="http://hovertree.com/h/bjaf/0k3j0n95.htm">代码说明</a> 
 <br />手机扫描二维码体验效果：<br />
    <img src="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/cf3a30e8-866b-4029-af4d-e4afcc5a8d19-1639930853771.jpg" alt="二维码" />
</div>
    <script type="text/javascript">
        function hovertreeMove(event)
        { 
            alert("何问起提示：在元素区内触发了滑动事件。包含" + event.touches.length + "个" + event.touches[0]);
        }
        document.getElementById("hovertreechuping").addEventListener("touchmove", hovertreeMove);
    </script>
</body>
</html>