Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov
OnTouch листание
fast click : 'fc'
swipe left : 'swl'
swipe right : 'swr'
swipe up : 'swu'
swipe down : 'swd'
<script>
window.onload = function () {
(function (d) {
var ce = function (e, n) {
var a = document.createEvent("CustomEvent");
a.initCustomEvent(n, true, true, e.target);
e.target.dispatchEvent(a);
a = null;
return false
},
nm = true, sp = {x: 0, y: 0}, ep = {x: 0, y: 0},
touch = {
touchstart: function (e) {
sp = {x: e.touches[0].pageX, y: e.touches[0].pageY}
},
touchmove: function (e) {
nm = false;
ep = {x: e.touches[0].pageX, y: e.touches[0].pageY};
i??f(Math.abs(ep.x - sp.x) > 10 && Math.abs(ep.y - sp.y) < 20) e.preventDefault();
}
},
touchend: function (e) {
if (nm) {
ce(e, 'fc')
} else {
var x = ep.x - sp.x, xr = Math.abs(x), y = ep.y - sp.y, yr = Math.abs(y);
if (Math.max(xr, yr) > 20) {
ce(e, (xr > yr ? (x < 0 ? 'swl' : 'swr') : (y < 0 ? 'swu' : 'swd')))
}
};
nm = true
},
touchcancel: function (e) {
nm = false
}
};
for (var a in touch) {
d.addEventListener(a, touch[a], false);
}
})(document);
//EXAMPLE OF USE
var h = function (e) {
console.log(e.type, e)
};
document.body.addEventListener('fc', h, false);// 0-50ms vs 500ms with normal click
document.body.addEventListener('swl', h, false);
document.body.addEventListener('swr', h, false);
document.body.addEventListener('swu', h, false);
document.body.addEventListener('swd', h, false);
}
</script>
<div style="
width:200px;
height:200px;
background-color:grey;
line-height:200px;
text-align:center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font:24px Arial, sans-serif;"></div>
<script type="text/javascript">
(function (D) {
var
ce = function (e, n) {
var a = D.createEvent("CustomEvent");
a.initCustomEvent(n, true, true, e.target);
e.target.dispatchEvent(a);
a = null;
return 1
},
m = (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? 'touch' : 'mouse'),
nm = 1,
bd = 0,
sx,
sy,
ex,
ey,
M = Math,
MA = M.abs,
MM = M.max,
x,
y,
xr,
yr,
f = {
touch: {
touchstart: function (e) {
return ce(e, (sx = e.touches[0].pageX, sy = e.touches[0].pageY, 'sfc'))
},
touchmove: function (e) {
return nm = 0, ex = e.touches[0].pageX, ey = e.touches[0].pageY, 1
},
touchend: function (e) {
return ce(e, nm ? 'fc' : (x = ex - sx, xr = MA(x), y = ey - sy, yr = MA(y), nm = 1, MM(xr, yr) > 20 ? xr > yr ? x < 0 ? 'swl' : 'swr' : y < 0 ? 'swu' : 'swd' : 'fc'))
},
touchcancel: function (e) {
return nm = 0, 1
}
},
mouse: {
mousedown: function (e) {
return e.button || (bd = 1, sx = e.x, sy = e.y, ce(e, 'sfc'))
},
mousemove: function (e) {
return !bd || (nm = 0, ex = e.x, ey = e.y, 1)
},
mouseup: function (e) {
return e.button || (bd = 0, ce(e, nm ? 'fc' : (nm = 1, x = ex - sx, xr = MA(x), y = ey - sy, yr = MA(y), MM(xr, yr) > 20 ? xr > yr ? x < 0 ? 'swl' : 'swr' : y < 0 ? 'swu' : 'swd' : 'fc')))
}
}
};
for (var a in f[m]) {
D.addEventListener(a, f[m][a], false)
}
})(document)
/* USAGE */
function addAllListeners() {
function func(e) {
div.innerHTML = v[e.type];
}
var div = document.getElementsByTagName('div')[0],
a = ['sfc', 'fc', 'swl', 'swr', 'swu', 'swd'], b = a.length,
v = {
sfc: 'superFastClick',
fc: 'fastClick',
swl: 'left',
swr: 'right',
swu: 'up',
swd: 'down'
};
while (b--) {
div.addEventListener(a[b], func, false)
}
div.addEventListener('touchstart', function (e) {
e.preventDefault()
}, false);
}
//window.addEventListener('load',addAllListeners,false)
addAllListeners();
/* USAGE */
</script>
.
Прокомментировать/Отблагодарить