js触摸事件演示demo显示触摸时各种状态的实时坐标演示代码:code!DOCTYPEhtmlhtmlheadmetacharset="utf-8"metaname="apple-touch-fullscreen"content="yes"/metaname="format-detection"content="telephone=no"/metaname="apple-mobile - ...

网站源码下载网 › 首页 › 综合资讯› 技术文章 ›

js触摸事件演示demo

技术文章

每日更新

2024-7-17 16:01 115人浏览 0人回复

原作者: 全都有综合资源网来自: 全都有综合资源网收藏分享邀请

摘要

显示触摸时各种状态的实时坐标演示代码:code!DOCTYPEhtmlhtmlheadmetacharset="utf-8"metaname="apple-touch-fullscreen"content="yes"/metaname="format-detection"content="telephone=no"/metaname="apple-mobile- ...

显现触摸时各类状态的实时坐标演示代码:

js触摸事务演示demo1762 作者:全都有综合资本网来历:全都有综合资本网公布时候:2024-7-17 16:01

layui-box layui-code-view" style="margin-top: 0px; margin-bottom: 10px; padding: 9.5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; position: relative; font-size: 13px; border: 1px solid rgb(204, 204, 204); background-color: rgb(245, 245, 245); color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, "Courier New", monospace; overflow: auto; line-height: 1.42857; word-break: break-all; border-radius: 4px;">code
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  
    <title>触摸</title>
</head>
<body>
<div id="touch" style="margin-top:50%;margin-left:20%;">在手机端形式翻开</div>
<script>
    function tou (){
        //在网页中增加监听触摸开辟、触摸中、触摸竣事事务
        document.addEventListener('touchstart',touch,false);
        document.addEventListener('touchmove',touch,false);
        document.addEventListener('touchend',touch,false);
             //触摸事务挪用的函数
             function touch (event){
             //event 当前的事务工具，包括当前事务的一些信息，比如：坐标信息
             //var event = event || window.event 阅读器兼容
             var event = event || window.event;
             //获得id
             var local = document.getElementById("touch");
             //event.type 获得当前事务工具的范例
             //event.touches[0] 事务工具中的第一个手指
             // event.touches[0].clientX 事务工具中的第一个手指在客户端X坐标
             //event.changedTouches[0].clientX 事务工具中触摸块改变的时辰的坐标
             switch(event.type){
                case "touchstart":
                    local.innerHTML ="Touchstart (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                    break;
                case "touchmove":
                    event.preventDefault();
                    local.innerHTML ="Touchmove (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                    break;
                case "touchend":
                    local.innerHTML ="Touchend (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
                    break;
            }
        }
 
    }
 
    window.addEventListener('load',tou,false);
    
</script>
</body>
</html>

©版权免责声明

1、本站所有资源均来自用户上传及互联网。如有侵权，请联系站长！
2、分享目的仅供大家学习交流。下载后必须在24小时内删除！
3、不得用于非法商业目的或违反国家法律。否则，后果自负！
4、本站提供的源代码、模板、插件等资源不包含技术服务。敬请谅解！
5.如果出现无法下载、无效或有广告的链接，请联系管理员寻求帮助！
6、本站资源价格仅用于赞助，所收取的费用仅用于维持本站日常运营！
7、如果遇到加密压缩包，请使用WINRAR解压。如果遇到无法解压的加密压缩包，请联系管理员！
8、由于精力有限，很多源代码无法详细测试（解密），部分源代码无法区分为病毒或误报，所以没有进行修改。请在使用前进行筛选。

本文网址：

联系客服

demo, 演示demo