zoukankan      html  css  js  c++  java
  • jquery如何获取手机网页触屏坐标:ontouchstart 、ontouchend、ontouchmove

    function handleTouchEvent(event) {
        //只跟踪一次触摸
        if (event.touches.length == 1) {
            var output = document.getElementById("output");
            switch (event.type) {
                case "touchstart":
                    output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                    break;
                case "touchend":
                    output.innerHTML += "Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
                    break;
                case "touchmove":
                    event.preventDefault(); //阻止滚动
                    output.innerHTML += "Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                    break;
            }
        }
    }
    document.addEventListener("touchstart", handleTouchEvent, false);
    document.addEventListener("touchend", handleTouchEvent, false);
    document.addEventListener("touchmove", handleTouchEvent, false);

    1. touchstart :手指放在一个DOM元素上。
    2. touchmove :手指拖曳一个DOM元素。
    3. touchend :手指从一个DOM元素上移开

    这是监听整个页面的触摸事件。加上这个代码后,忘记了有个变量定义了 就是 output这个。

    你在页面建立一个id 放上代码 就可以看到测试结果了。

    1 <p id="output">这里显示坐标</p>
    2 <script>
    3 ...上面的js代码复制到这,就可以了
    4 </script>
  • 相关阅读:
    课程作业06-汇总整理
    课程作业04-汇总整理
    课程作业04-字串加密解密
    课程作业03-你已经创建了多少个对象?
    课程作业03-汇总整理
    课程作业02-汇总整理
    02-实验性问题总结归纳
    猜数字游戏
    RandomStr实验报告(验证码实验)
    个人总结
  • 原文地址:https://www.cnblogs.com/pengchengzhong/p/6051446.html
Copyright © 2011-2022 走看看