zoukankan      html  css  js  c++  java
  • js 手机端触发事事件、javascript手机端/移动端触发事件

    处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    touchstart:  // 手指放到屏幕上的时候触发
    touchmove:  // 手指在屏幕上移动的时候触发
    touchend:  // 手指从屏幕上拿起的时候触发
    touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详
     
    //属性
    client / clientY:// 触摸点相对于浏览器窗口viewport的位置
    pageX / pageY:// 触摸点相对于页面的位置
    screenX /screenY:// 触摸点相对于屏幕的位置
    identifier: // touch对象的unique ID
     
    //touchstart事件 
    function touchSatrtFunc(e) { 
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
        var touch = e.touches[0]; //获取第一个触点 
        var x = Number(touch.pageX); //页面触点X坐标 
        var y = Number(touch.pageY); //页面触点Y坐标 
        //记录触点初始位置 
        startX = x; 
        startY = y; 
    }
     
    //touchmove事件
    function touchMoveFunc(e) { 
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
        var touch = evt.touches[0]; //获取第一个触点 
        var x = Number(touch.pageX); //页面触点X坐标 
        var y = Number(touch.pageY); //页面触点Y坐标 
        var text = 'TouchMove事件触发:(' + x + ', ' + y + ')'
        //判断滑动方向 
        if (x - startX != 0) { 
            //左右滑动 
        
        if (y - startY != 0) { 
            //上下滑动 
        
  • 相关阅读:
    JS循环语句作业讲解(折纸、兔子生兔子、买东西组合)
    JavaScript If...Else 语句
    一个用纯CSS实现的下拉菜单
    form表单练习
    CSS样式表
    form表单的属性标签
    form表单的属性标签和练习
    HTML基础标签入门
    学习目标
    Oracle表格建立
  • 原文地址:https://www.cnblogs.com/gopark/p/8822768.html
Copyright © 2011-2022 走看看