js触屏滑动事件

var answerBar=document.getElementById("answerSelect");
var start_left;
var end_left;
answerBar.addEventListener("touchstart",function(event){
    event.preventDefault();
    if (event.targetTouches.length == 1) {
        var touch = event.targetTouches[0];
        start_left = touch.pageX;
    }
},false);
answerBar.addEventListener("touchmove",function(event){
    event.preventDefault();
    if (event.targetTouches.length == 1) {
        var touch = event.targetTouches[0];
        end_left = touch.pageX;
    }
},false);
answerBar.addEventListener("touchend",function(event){
    if(end_left-start_left>40){
        console.info("r");
    }
    else if(start_left-end_left>40){
       console.info("l");
    }
},false);

时间: 2024-11-05 19:44:52

js触屏滑动事件的相关文章

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取

移动端touch触屏滑动事件、滑动触屏事件监听!

移动端touch触屏滑动事件.滑动触屏事件监听! 一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小

JS移动客户端--触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

移动端触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

touch移动触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 四种touch事件 touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发. touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动. touchend 当手指从屏幕上移开时触发

js实现touch移动触屏滑动事件

以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表 touches: //当前屏幕上所有手指的列表targetTouches: //当前dom元素上手指的列表,尽量使用这个代替toucheschangedTouche

朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

JS代码(jquery.showup.js): /** * @Creator: Nelson Kuang/Fast Mover * @showup 翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页 * @License:The MIT License (MIT) * @调用方式 $("#container").showup({ startPage: 0,//开始页面 duration:1000//动画持续时间 }) * @Creator: Nelson Kua

移动端触屏滑动,JS事件

先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:手指放到屏幕上时触发 touchmove:手指在屏幕上滑动式触发 touchend:手指离开屏幕时触发 touchcan

移动web js触屏事件 按下 松开 滑动

移动web js触屏事件 按下 松开 滑动讲解 一.触摸事件 ontouchstart ontouchmove ontouchend ontouchcancel 前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的: touchstart → mouseover → mousemove → mousedown → mouseup → click1 /*** onTouchEvent*/ 1 2 3 4 5 6 7 8 9 10 11 12