浅谈 js 模仿手机的动作

最新推荐文章于 2024-10-10 14:55:26 发布

sangfei_no1

最新推荐文章于 2024-10-10 14:55:26 发布

阅读量764

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.csdn.net/sang_fei/article/details/44455047

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了移动开发中基本的触控事件处理方法，通过一个简单的示例展示了如何使用JavaScript监听并响应touchstart、touchmove及touchend事件，并在页面上实时显示触摸的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚进入移动开发，对手机的动作总是抱有一种迷茫的感觉，刚刚找到一个很简单的动作，顿时其实也 PC 端差距不大：

具体代码如下：

<script type="text/javascript" charset="utf-8">
			function load (){
	    		document.addEventListener('touchstart',touch, false);
	    		document.addEventListener('touchmove',touch, false);
	    		document.addEventListener('touchend',touch, false);
			    function touch (event){
			        var event = event || window.event;
			         
			        var oInp = document.getElementById("inp");
			 
			        switch(event.type){
			            case "touchstart":
			                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
			                break;
			            case "touchend":
			                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
			                break;
			            case "touchmove":
			                event.preventDefault();
			                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
			                break;
			        }
			         
			    }
			}
			window.addEventListener('load',load, false);	
		</script>