zoukankan      html  css  js  c++  java
  • H5移动端触摸事件:touchstart、touchend、touchmove

    第一部分代码事例:

    <html>
    <head>
    <meta charset="utf-8">
    <style>
    #main,#main1{
    500px;
    height:500px;
    border:1px solid red;
    }
    </style>
    <script type="text/javascript">
    function load (){
    var oInp = document.getElementById("main1");
    oInp.addEventListener('touchstart',touch, false);
    oInp.addEventListener('touchmove',touch, false);
    oInp.addEventListener('touchend',touch, false);

    function touch (event){
    var event = event || window.event;

    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>
    </head>

    <body>

    <p id="main1">请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

    </body>
    </html>

    第二部分代码事例:移动端左右滑动页面切换测试代码

    document.querySelector(".page2").addEventListener("touchstart", function (e1) {
    e1.preventDefault();
    console.log(e1)
    var touch1 = e1.touches[0];
    var startX = touch1.pageX;
    document.querySelector(".page2").addEventListener("touchmove", function (e2) {
    e2.stopPropagation();
    var touch2 = e2.touches[0];
    var Xc = touch2.pageX - startX;
    document.querySelector(".page2").addEventListener("touchend", function (e3) {
    e3.preventDefault();
    if (Xc > 40) {
    $(".page2").animate({
    left: "640px",
    "0px"
    }, 400);
    $(".page3").show();
    $(".now-check").addClass("chRotate");
    clearTimeout(timer1);
    }
    })
    })
    })

  • 相关阅读:
    Directx11教程(21) 修正程序最小化异常bug
    Directx教程(28) 简单的光照模型(7)
    Directx教程(22) 简单的光照模型(1)
    Directx教程(26) 简单的光照模型(5)
    Directx教程(25) 简单的光照模型(4)
    finit 1.5 发布,/sbin/init 的服务器监控器
    MySQL 8小时问题
    DataCleaner 3.0.1 发布,数据质量分析管理
    dedecms调用其它栏目列表
    ReportPlus:在iPad上创建和使用仪表盘及报表
  • 原文地址:https://www.cnblogs.com/pengchengzhong/p/5997576.html
Copyright © 2011-2022 走看看