js & touch & swiper

js & touch & swiper

https://developer.mozilla.org/en/docs/Web/API/Touch_events

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-01-01
 *
 * @description touchApp
 * @augments
 * @example
 *
 */

function load() {
    document.addEventListener("touchstart", touch, false);
    document.addEventListener("touchmove", touch, false);
    document.addEventListener("touchend", touch, false);
    function touch(event) {
        var event = event || window.event;
        var oInp = document.getElementById("inp");
        switch (event.type) {
            case "touchstart":
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
            case "touchend":
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
            break;
        }
    }
}

window.addEventListener("load", load, false);



// const touchApp = (datas = [], debug = false) => {
//     let result = ``;
//     // do something...
//     return result;
// };

// export default touchApp;

// export {
//     touchApp,
// };

single click

the order of events

1. touchstart

2. touchmove

3. touchend

4. mouseover

5. mousemove

6. mousedown

7. mouseup

8. click

https://www.html5rocks.com/en/mobile/touchandmouse/

https://www.w3schools.com/jsref/obj_touchevent.asp

http://javascriptkit.com/javatutors/touchevents.shtml

http://fabricjs.com/touch-events

http://tutorials.jenkov.com/responsive-mobile-friendly-web-design/touch-events-in-javascript.html

https://hammerjs.github.io/touch-emulator/
https://github.com/hammerjs/touchemulator

Swiper

https://idangero.us/swiper/get-started/

https://github.com/nolimits4web/swiper/blob/master/src/swiper.js

// Swiper Class
import Swiper from './components/core/core-class';

// Core Modules
import Device from './modules/device/device';
import Support from './modules/support/support';
import Browser from './modules/browser/browser';
import Resize from './modules/resize/resize';
import Observer from './modules/observer/observer';

//IMPORT_COMPONENTS

const components = [
  Device,
  Support,
  Browser,
  Resize,
  Observer,
  //INSTALL_COMPONENTS
];

if (typeof Swiper.use === 'undefined') {
  Swiper.use = Swiper.Class.use;
  Swiper.installModule = Swiper.Class.installModule;
}

Swiper.use(components);

//EXPORT

demo

https://codepen.io/webgeeker/pen/rEZPGV

---

javascript swipe event

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

https://www.google.com/search?newwindow=1&safe=active&q=javascript+swipe+event&sa=X&ved=2ahUKEwiz9fKAsKnjAhWCE4gKHTjSAy8Q1QIoBXoECAoQBg

https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android

https://css-tricks.com/simple-swipe-with-vanilla-javascript/

http://www.javascriptkit.com/javatutors/touchevents2.shtml
http://javascriptkit.com/javatutors/touchevents.shtml

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     

function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

class Swipe {
    constructor(element) {
        this.xDown = null;
        this.yDown = null;
        this.element = typeof(element) === 'string' ? document.querySelector(element) : element;

        this.element.addEventListener('touchstart', function(evt) {
            this.xDown = evt.touches[0].clientX;
            this.yDown = evt.touches[0].clientY;
        }.bind(this), false);

    }

    onLeft(callback) {
        this.onLeft = callback;

        return this;
    }

    onRight(callback) {
        this.onRight = callback;

        return this;
    }

    onUp(callback) {
        this.onUp = callback;

        return this;
    }

    onDown(callback) {
        this.onDown = callback;

        return this;
    }

    handleTouchMove(evt) {
        if ( ! this.xDown || ! this.yDown ) {
            return;
        }

        var xUp = evt.touches[0].clientX;
        var yUp = evt.touches[0].clientY;

        this.xDiff = this.xDown - xUp;
        this.yDiff = this.yDown - yUp;

        if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.
            if ( this.xDiff > 0 ) {
                this.onLeft();
            } else {
                this.onRight();
            }
        } else {
            if ( this.yDiff > 0 ) {
                this.onUp();
            } else {
                this.onDown();
            }
        }

        // Reset values.
        this.xDown = null;
        this.yDown = null;
    }

    run() {
        this.element.addEventListener('touchmove', function(evt) {
            this.handleTouchMove(evt).bind(this);
        }.bind(this), false);
    }
}

class demo

// Use class to get element by string.
var swiper = new Swipe('#my-element');
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();

// Get the element yourself.
var swiper = new Swipe(document.getElementById('#my-element'));
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();

// One-liner.
(new Swipe('#my-element')).onLeft(function() { alert('You swiped left.') }).run();

https://codepen.io/ganmahmud/pen/RaoKZa

swiper

https://swiperjs.com/demos/

https://github.com/nolimits4web/swiper

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---