Merhaba,
Mobilde parmağımızla yaptığımız sağa, sola, yukarı ve aşağı kaydırma işlemlerine genel olarak swipe diyoruz. Swipe up, swipe down, swipe right, swipe left.. şeklinde.
Pure Javascript
- JS Swipe Events (swiped-events.js)
/*! * swiped-events.js * Pure JavaScript swipe events */ (function (window, document) { 'use strict'; // patch CustomEvent to allow constructor creation (IE/Chrome) if (typeof window.CustomEvent !== 'function') { window.CustomEvent = function (event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent('CustomEvent'); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); return evt; }; window.CustomEvent.prototype = window.Event.prototype; } document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); document.addEventListener('touchend', handleTouchEnd, false); var xDown = null; var yDown = null; var xDiff = null; var yDiff = null; var timeDown = null; var startEl = null; function handleTouchEnd(e) { // if the user released on a different target, cancel! if (startEl !== e.target) return; var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20px var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10); // default 500ms var timeDiff = Date.now() - timeDown; var eventType = ''; var changedTouches = e.changedTouches || e.touches || []; if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) { if (xDiff > 0) { eventType = 'swiped-left'; } else { eventType = 'swiped-right'; } } } else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) { if (yDiff > 0) { eventType = 'swiped-up'; } else { eventType = 'swiped-down'; } } if (eventType !== '') { var eventData = { dir: eventType.replace(/swiped-/, ''), xStart: parseInt(xDown, 10), xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10), yStart: parseInt(yDown, 10), yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10) }; // fire `swiped` event event on the element that started the swipe startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData })); // fire `swiped-dir` event on the element that started the swipe startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData })); } // reset values xDown = null; yDown = null; timeDown = null; } function handleTouchStart(e) { // if the element has data-swipe-ignore="true" we stop listening for swipe events if (e.target.getAttribute('data-swipe-ignore') === 'true') return; startEl = e.target; timeDown = Date.now(); xDown = e.touches[0].clientX; yDown = e.touches[0].clientY; xDiff = 0; yDiff = 0; } function handleTouchMove(e) { if (!xDown || !yDown) return; var xUp = e.touches[0].clientX; var yUp = e.touches[0].clientY; xDiff = xDown - xUp; yDiff = yDown - yUp; } function getNearestAttribute(el, attributeName, defaultValue) { // walk up the dom tree looking for data-action and data-trigger while (el && el !== document.documentElement) { var attributeValue = el.getAttribute(attributeName); if (attributeValue) { return attributeValue; } el = el.parentNode; } return defaultValue; } }(window, document));
- Swipe Events Kullanımı:
///// Swipe Events document.addEventListener('swiped-left', function(e) { console.log(e.target); // element that was swiped console.log(e.detail); // event data { dir: 'left', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 } }); document.addEventListener('swiped-right', function(e) { console.log(e.target); // element that was swiped console.log(e.detail); // event data { dir: 'right', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 } }); document.addEventListener('swiped-up', function(e) { console.log(e.target); // element that was swiped console.log(e.detail); // event data { dir: 'up', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 } }); document.addEventListener('swiped-down', function(e) { console.log(e.target); // element that was swiped console.log(e.detail); // event data { dir: 'down', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 } });
Etiket: on swipe down on swipe left on swipe right on swipe up pure javascript swipe events
Kat: JS Tricks, Labs Tarih: 5 Ekim 2020 Okunma:65
Paylaş:
Kat: JS Tricks, Labs Tarih: 5 Ekim 2020 Okunma:65
Paylaş: