移动设备、手机浏览器Javascript滑动事件代码

最新推荐文章于 2024-03-02 12:05:58 发布

海涛zht666

最新推荐文章于 2024-03-02 12:05:58 发布

阅读量10w+

点赞数 3

分类专栏： HTML5

本文链接：https://blog.csdn.net/zht666/article/details/8621332

版权

HTML5 专栏收录该内容

14 篇文章

订阅专栏

以下经过本人测试成功。

测试平台：三星S5830I

操作系统：Android 2.3.6

浏览器：UC浏览器

HTML标准：HTML5

测试了三个事件：touchstart、touchmove 和 touchend，并获取了触摸时触点在页面上的坐标，根据坐标进行了左右滑动、上下滑动判断。

代码如下：

<!-- HTML5 -->
<!DOCTYPE html>
<html>
    <head>
        <title>TouchEvent测试</title>
        <meta charset="gbk">
    </head>
    <body>
        <h2>TouchEvent测试</h2>
        <br />
        <div id="version" style="border:2px solid black;background-color:yellow"></div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="result" style="border:2px solid red; color:red;">未触发事件！</div>
        <div id="test" style="border:2px solid red">
            <ul>
                <li id="li1">测试条目1</li>
                <li id="li2">测试条目2</li>
                <li id="li3">测试条目3</li>
                <li id="li4">测试条目4</li>
                <li id="li5">测试条目5</li>
                <li id="li6">测试条目6</li>
                <li id="li7">测试条目7</li>
                <li id="li8">测试条目8</li>
                <li id="li9">测试条目9</li>
                <li id="li10">测试条目10</li>
                <li id="li11">测试条目11</li>
                <li id="li12">测试条目12</li>
                <li id="li13">测试条目13</li>
                <li id="li14">测试条目14</li>
                <li id="li15">测试条目15</li>
                <li id="li16">测试条目16</li>
                <li id="li17">测试条目17</li>
                <li id="li18">测试条目18</li>
                <li id="li19">测试条目19</li>
                <li id="li20">测试条目20</li>
            </ul>
        </div>
        
        <script type="text/javascript">
            //全局变量，触摸开始位置
            var startX = 0, startY = 0;
            
            //touchstart事件
            function touchSatrtFunc(evt) {
                try
                {
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

                    var touch = evt.touches[0]; //获取第一个触点
                    var x = Number(touch.pageX); //页面触点X坐标
                    var y = Number(touch.pageY); //页面触点Y坐标
                    //记录触点初始位置
                    startX = x;
                    startY = y;

                    var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
                    document.getElementById("result").innerHTML = text;
                }
                catch (e) {
                    alert('touchSatrtFunc：' + e.message);
                }
            }

            //touchmove事件，这个事件无法获取坐标
            function touchMoveFunc(evt) {
                try
                {
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
                    var touch = evt.touches[0]; //获取第一个触点
                    var x = Number(touch.pageX); //页面触点X坐标
                    var y = Number(touch.pageY); //页面触点Y坐标

                    var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';

                    //判断滑动方向
                    if (x - startX != 0) {
                        text += '<br/>左右滑动';
                    }
                    if (y - startY != 0) {
                        text += '<br/>上下滑动';
                    }

                    document.getElementById("result").innerHTML = text;
                }
                catch (e) {
                    alert('touchMoveFunc：' + e.message);
                }
            }

            //touchend事件
            function touchEndFunc(evt) {
                try {
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

                    var text = 'TouchEnd事件触发';
                    document.getElementById("result").innerHTML = text;
                }
                catch (e) {
                    alert('touchEndFunc：' + e.message);
                }
            }

            //绑定事件
            function bindEvent() {
                document.addEventListener('touchstart', touchSatrtFunc, false);
                document.addEventListener('touchmove', touchMoveFunc, false);
                document.addEventListener('touchend', touchEndFunc, false);
            }

            //判断是否支持触摸事件
            function isTouchDevice() {
                document.getElementById("version").innerHTML = navigator.appVersion;

                try {
                    document.createEvent("TouchEvent");
                    alert("支持TouchEvent事件！");

                    bindEvent(); //绑定事件
                }
                catch (e) {
                    alert("不支持TouchEvent事件！" + e.message);
                }
            }

            window.onload = isTouchDevice;
    </script>
    </body>
</html>

下面是jQuery Mobile实现上下滑动的方式：

jQuery Mobile左右滑动事件：swipe（水平滑动30px以上时触发）、swipeLeft（向左滑）、swipeRight（向右滑）

jQuery Mobile垂直滑动事件：scrollstart（上下滚动）、scrollend（滚动停止）

jQuery Mobile触摸点击事件：tap（快速触碰）、taphold（触碰并保持750ms以上触发）

<!DOCTYPE html>
<html>
    <head>
        <title>Ajax测试</title>
        <meta charset="gbk">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
        <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
        <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
	    <div data-role="page" data-theme="b">
        <div data-role="header"></div>
        <div data-role="content">
            <script>
				//scrollstart事件
				function scrollstartFunc(evt) {
					try
					{
						var target = $(evt.target);
						while (target.attr("id") == undefined) {
							target = target.parent();
						}
						//获取触点目标id属性值
						var targetId = target.attr("id");

						alert("targetId: " + targetId);
					}
					catch (e) {
						alert('myscrollfunc：' + e.message);
					}
				}

				function myinit() {
					//绑定上下滑动事件
					$("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
				}

				window.onload = myinit;
			</script>

			<!-- listview测试 -->
			<ul id="myul" data-role="listview" data-inset="true">
				<li data-role="list-divider">信息列表</li>
				<li id="li1" data-role="fieldcontain">信息1</li>
				<li id="li2" data-role="fieldcontain">信息2</li>
				<li id="li3" data-role="fieldcontain">信息3</li>
				<li id="li4" data-role="fieldcontain">信息4</li>
				<li id="li5" data-role="fieldcontain">信息5</li>
				<li id="li6" data-role="fieldcontain">信息6</li>
				<li id="li7" data-role="fieldcontain">信息7</li>
				<li id="li8" data-role="fieldcontain">信息8</li>
				<li id="li9" data-role="fieldcontain">信息9</li>
				<li id="li10" data-role="fieldcontain">信息10</li>
			</ul>
        </div>
    </body>
</html>

欢迎转载，欢迎批评指正！