js & touch & swiper
2024-09-04 22:38:09
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
touchstart
touchmove
touchend
mouseover
mousemove
mousedown
mouseup
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://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://github.com/nolimits4web/swiper
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- jstl foreach标签
- MySQL基础二
- CodeForces Round 200 Div2
- Matlab无法打开M文件的错误（ Undefined function or method 'uiopen' for input arguments of type 'char）
- Hive实现oracle的Minus函数
- CSS完美实现iframe高度自适应（支持跨域）
- Qt实现基本QMainWindow主窗口程序
- Android开发优化之——使用软引用和弱引用
- sqlite数据库如何远程连接?
- Ubuntu下将python从2.7升级到3.5
- ftp不能登录报错
- 开发uniapp必备
- python基础题型一
- nginx 操作笔记
- Javascript 创建对象的三种方法及比较【转载+整理】
- Scratch3.0——项目层次结构
- 【Atcoder】ARC088 D - Wide Flip
- mysql 手动安装和管理
- 泉五培训Day1
- 算法学习记录-排序——插入排序（Insertion Sort）