zoukankan      html  css  js  c++  java
  • jquery——移动端touch事件

    首先为了防止事件触发默认行为,我们需要去禁止,安全的禁止方法:

    // 判断默认行为是否可以被禁用
        if (e.cancelable) {
            // 判断默认行为是否已经被禁用
            if (!e.defaultPrevented) {
                e.preventDefault();
            }
    }   

    三个事件:

    $("body").on("touchstart", function(e) {
    
       e.preventDefault();
    
    });
    
    $("body").on("touchend", function(e) {
    
       e.preventDefault();
    
    });
    
    $("body").on("touchmove", function(e) {
    
       e.preventDefault();
    
    });

    移动开始和结束的坐标获取:

    startX = e.originalEvent.changedTouches[0].pageX;
    
    startY = e.originalEvent.changedTouches[0].pageY;
    
    moveEndX = e.originalEvent.changedTouches[0].pageX;
    
    moveEndY = e.originalEvent.changedTouches[0].pageY;

    样例:

    $("body").on("touchstart", function(e) {
    
        e.preventDefault();
    
        startX = e.originalEvent.changedTouches[0].pageX,
    
        startY = e.originalEvent.changedTouches[0].pageY;
    
    });
    
    $("body").on("touchmove", function(e) {
    
        e.preventDefault();
    
        moveEndX = e.originalEvent.changedTouches[0].pageX,
    
        moveEndY = e.originalEvent.changedTouches[0].pageY,
    
        X = moveEndX - startX,
    
        Y = moveEndY - startY;
    
        if ( X > 0 ) {
    
           alert('向左滑动');
    
        }
    
    });

     注:以上$使用基于jquery1.7.2

     

    对应pc端鼠标操作:

    touchstart  ——>   mousedown
    
    touchend  ——>   mouseup
    
    touchmove  ——>   mousemove

  • 相关阅读:
    关于本人对javascript闭包的理解
    关于闭包内存泄露的处理方法
    javascript超时调用、间歇调用
    浏览器加载和渲染html的顺序
    CSS hack
    JS在操作IE与FF的一些区别
    javascript对select option操作
    jsp端使用ApplicationContext
    人生的35个经典好习惯
    2008个人总结
  • 原文地址:https://www.cnblogs.com/end-emptiness/p/9093104.html
Copyright © 2011-2022 走看看