Mobile sliding event method

Keywords: JQuery Mobile

;

Today, when using jquery.fullpage.js, I found that the mobile debugging does not support sliding events, so I wrote a sliding event. As follows, when using this plug-in, I only need to bind a sliding event to the window, and I don't need to add a method. Since I used it for the first time, I haven't seen the specific information of his JS, but I just glanced at it, OK, see the specific content Code:

// Sliding event
    /*
    *   el      DOM   Clicked elements
    *   fncontainer obj Event object collection
    *   offset  Num  Event triggered value
    */
    function touchevent(el,fncontainer,offset){
        var el = el?el:window;
        var offset = offset?offset:50;
        var startX,startY,
            endX = 0,
            endY = 0 ;
        el.addEventListener('touchstart',function(e){
            // console.log(e)
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
            // console.log("startX->"+startX,"startY ->"+startY)
        },false); 
        el.addEventListener('touchmove',function(e){
            endX = e.touches[0].clientX;
            endY = e.touches[0].clientY;
            // console.log("endX ->"+endX,"endY ->"+endY)
        },false);
        el.addEventListener('touchend',function(e){
            var lengthX = endX==0?0:Math.abs(startX-endX);
            var lengthY = endY==0?0:Math.abs(startY-endY);
            // console.log("lengthX"+lengthX,"lengthY"+lengthY)
            if(lengthX>lengthY && lengthX>=offset){
                fncontainer && (startX - endX) >0?(fncontainer.left?(fncontainer.left)():null):(fncontainer.right?(fncontainer.right)():null);
            }else if(lengthY>lengthX && lengthY>=offset){
                fncontainer && (startY - endY) >0 ?(fncontainer.up?(fncontainer.up)():null):(fncontainer.down?(fncontainer.down)():null);
            }
        },false);
    }
    var fncontainer = {  //Define the corresponding event method
        left:left,
        right:right,
        up:up,
        down:down
    }
    touchevent(window,fncontainer);//If you do not need an event method, you can only pass in the element to add event listening
    function left(){
        alert('left')
    }
    function right(){
        alert('right')
    }
    function up(){
        alert('up')
    }
    function down(){
        alert('down')
    }
In fact, it's better to use touch event (window) directly in jQuery.fullpage.js. No additional methods need to be added, but for the convenience of future use, I wrote one for reference only


Posted by jamie85 on Sun, 03 May 2020 00:49:08 -0700