HTML5触摸事件

最新推荐文章于 2022-07-29 15:21:38 发布

buyue__

最新推荐文章于 2022-07-29 15:21:38 发布

阅读量532

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/buyueliuying/article/details/51598902

版权

js 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Touch</title>
</head>

<body style="height:100%;">
<div id="test" style=" height:300px; width:300px; background-color:#CCCCCC; text-align:center;">用移动设备访问，在这个区域测试</div>
<div id="inp" style="width:200px; word-break:break-all; white-space:normal;"></div>
</body>
<script>
    function mobile_touch()
    {
        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',mobile_touch, false);
</script>
</html>