欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 前端 > javascript >

移动端js触摸事件大全

来源:未知 ?? 时间:2016-10-24 18:42?作者:xbdadmin

[导读] 一、手机上的触摸事件基本事件:touchstart /手指刚接触屏幕时触发touchmove /手指在屏幕上移动时触发touchend /手指从屏幕上移开时触发下面这个比较少用:touchcancel /触摸过程被系统取消...

今天带来:移动端js触摸事件大全


一、手机上的触摸事件

基本事件:


touchstart   /手指刚接触屏幕时触发

touchmove    /手指在屏幕上移动时触发

touchend     /手指从屏幕上移开时触发

 

下面这个比较少用:

touchcancel  /触摸过程被系统取消时触发

每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯:

 

touches         /位于屏幕上的所有手指的列表

targetTouches   /位于该元素上的所有手指的列表

changedTouches  /涉及当前事件的所有手指的列表


每个事件有列表,每个列表还有以下属性:

 

复制代码

其中坐标常用pageX,pageY:


pageX    /相对于页面的 X 坐标

pageY    /相对于页面的 Y 坐标

clientX  /相对于视区的 X 坐标

clientY  /相对于视区的 Y 坐标

screenX  /相对于屏幕的 X 坐标

screenY  /相对于屏幕的 Y 坐标

 

identifier /当前触摸点的惟一编号

target   /手指所触摸的 DOM 元素


其他相关事件:

 

event.preventDefault()   /阻止触摸时浏览器的缩放、滚动条滚动

var supportTouch = "createTouch" in document  /判断是否支持触摸事件


更多深入内容?点击:/wwwaff4cesclubaff4com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html

 

 

 

二、示例

 

以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:


var touchFunc = function(obj,type,func) {
    /滑动范围在5x5内则做点击处理,s是开始,e是结束
    var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
    var sTime = 0, eTime = 0;
    type = type.toLowerCase();
 
    obj.addEventListener("touchstart",function(){
        sTime = new Date().getTime();
        init.sx = event.targetTouches[0].pageX;
        init.sy = event.targetTouches[0].pageY;
        init.ex = init.sx;
        init.ey = init.sy;
        if(type.indexOf("start") != -1) func();
    }, false);
 
    obj.addEventListener("touchmove",function() {
        event.preventDefault();/阻止触摸时浏览器的缩放、滚动条滚动
        init.ex = event.targetTouches[0].pageX;
        init.ey = event.targetTouches[0].pageY;
        if(type.indexOf("move")!=-1) func();
    }, false);
 
    obj.addEventListener("touchend",function() {
        var changeX = init.sx - init.ex;
        var changeY = init.sy - init.ey;
        if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
            /左右事件
            if(changeX > 0) {
                if(type.indexOf("left")!=-1) func();
            }else{
                if(type.indexOf("right")!=-1) func();
            }
        }
        else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
            /上下事件
            if(changeY > 0) {
                if(type.indexOf("top")!=-1) func();
            }else{
                if(type.indexOf("down")!=-1) func();
            }
        }
        else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
            eTime = new Date().getTime();
            /点击事件,此处根据时间差细分下
            if((eTime - sTime) > 300) {
                if(type.indexOf("long")!=-1) func(); /长按
            }
            else {
                if(type.indexOf("click")!=-1) func(); /当点击处理
            }
        }
        if(type.indexOf("end")!=-1) func();
    }, false);
};


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

2018中国深海科考:“深海勇士”将开始试验性运行 小罗遭前主帅反击:生活混乱 达不到梅西C罗高度 比特大陆投资人工智能领域 希望开发出比特币AI芯片 中国7月PMI为51.2% 连续24个月超越荣枯线 特朗普前竞选经理成“通俄门”首位出庭受审人 白帽黑客\"攻击\"新加坡国防部网络 三周抓35漏洞 政协委员成龙:我们有功夫有熊猫 但没有功夫熊猫 大熊猫“变性”:曾被誉为“拆迁女王” 实为雄性 这名山西退休局长公车私用 被北京纪委党内处分 索萨赞莫德斯特替补也很积极 将为亚冠做好准备 郭川亲友透露救援细节:其失联前曾与同学通话 收盘:本周道指累计下跌1.6% 标普指数下跌1.3%
传Spotify计划在4月第一周上市:估值超200亿美… 腾讯未收复400元关 季绩期前港股难见强力反弹 中国科学家制备出大规模光量子计算芯片 刘鹤:中美达成共识 不打贸易战 凯斯主场作战盼重新启程 透露伤病让她非常痛苦 与邓文迪关系密切 特朗普女婿遭美情报官员警告 长征系列火箭开启“超级航天年”:今年发射36次 34板12助!过关也得惦记 场均三双就看最后2场 陕西靖边有保障对象被指公开转让公租房 官方回应 没有国足没有中超球迷看什么?这比赛已经风靡长沙 年轻人不愿从事建筑业,美国住房市场有麻烦 智课教育今日宣布完成B轮两亿元人民币融资
韩国速滑“内讧门”女主摘银 哭着向公众磕头谢罪 沃兹再现利物浦迷妹本色 呼吁队内头号射手别转会 找到暗物质是时间问题:美国在废弃金矿外开辟新战场 美国得州一处工厂发生爆炸 致20人受伤(图) 进球GIF-杨善平领红点套餐 伊哈洛亲自操刀命中 安顺百灵杯少儿围棋赛接近尾声 各组前16名晋升 韩方:拟赴朝见证拆核试场韩方记者名单再被朝拒收 接种了效价不合格百白破疫苗如何补种?专家解答 刘青云:太太希望我多拍戏 在家我只会发呆 30万开什么店好 过年摆地摊赚10万 投资两万的小型加工厂 养一百只土鸡利润多少 AG亚游集团