モバイル端末touchイベントの詳細
15423 ワード
1.ワンタッチドラッグ
2.マルチタッチ
4.touchジェスチャー——ズーム
5.方向ロック&bannerスクロール&ドロップダウンリフレッシュ
6.ダブルクリック+長押し
touch
window.onload = function () {
//rem
document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
let oBox = document.getElementsByClassName('box')[0];
oBox.addEventListener('touchstart',function (e) {
//
let disX = e.targetTouches[0].pageX - oBox.offsetLeft;
let disY = e.targetTouches[0].pageY - oBox.offsetTop;
//
e.preventDefault();
e.cancelBubble = true;
function fnMove(e) {
oBox.style.left = e.targetTouches[0].pageX - disX + 'px';
oBox.style.top = e.targetTouches[0].pageY - disY + 'px';
}
function fnEnd() {
oBox.removeEventListener('touchmove',fnMove,false);
oBox.removeEventListener('touchend',fnEnd,false);
}
oBox.addEventListener('touchmove',fnMove,false);
oBox.addEventListener('touchend',fnEnd,false);
},false)
}
2.マルチタッチ
touch window.onload = function () { document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px'; let oBoxs = document.getElementsByClassName('box'); Array.from(oBoxs).forEach(oBoxs=>{ drag(oBoxs); }); function drag(obj) { obj.addEventListener('touchstart',e=>{ e.preventDefault(); e.cancelBubble = true; let id = e.targetTouches[0].identifier; let disX = e.targetTouches[0].pageX - obj.offsetLeft; let disY = e.targetTouches[0].pageY - obj.offsetTop; function fnMove(e) { e.preventDefault(); e.cancelBubble = true; obj.style.left = e.targetTouches[0].pageX - disX + 'px'; obj.style.top = e.targetTouches[0].pageY - disY + 'px'; } function fnEnd(e) { let found = false; Array.from(e.changedTouches).forEach(touch=>{ if(touch.identifier == id){ found = true; } }); if(found){ obj.removeEventListener('touchmove',fnMove,false); obj.removeEventListener('touchend',fnEnd,false); } } obj.addEventListener('touchmove',fnMove,false); obj.addEventListener('touchend',fnEnd,false); },false); } }
3.touch手势——旋转
touch -
window.onload = function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
let oBox = document.querySelector('.box');
let old_ang = 45;
let start_ang,ang;
oBox.addEventListener('touchstart',e=>{
if(e.targetTouches.length >= 2){
e.preventDefault();
e.cancelBubble = true;
start_ang = old_ang;
let disX = e.targetTouches[0].clientX - e.targetTouches[1].clientX;
let disY = e.targetTouches[0].clientY - e.targetTouches[1].clientY;
ang = Math.atan2(disY,disX)*180/Math.PI;
oBox.addEventListener('touchmove',fnMove,false);
oBox.addEventListener('touchend',fnEnd,false);
}
function fnMove(e) {
e.preventDefault();
e.cancelBubble = true;
if(e.targetTouches.length >= 2){
let disX = e.targetTouches[0].clientX - e.targetTouches[1].clientX;
let disY = e.targetTouches[0].clientY - e.targetTouches[1].clientY;
let ang2 = Math.atan2(disY,disX)*180/Math.PI;
old_ang = start_ang + ang2 - ang;
oBox.style.transform = `rotate(${old_ang}deg)`;
}
}
function fnEnd() {
oBox.removeEventListener('touchmove',fnMove,false);
oBox.removeEventListener('touchend',fnEnd,false);
}
},false);
}
4.touchジェスチャー——ズーム
touch -
window.onload = function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
let oBox = document.querySelector('.box');
oBox.addEventListener('touchstart',e=>{
e.preventDefault();
e.cancelBubble = true;
let w = oBox.offsetWidth,h = oBox.offsetHeight;
let dis = Math.sqrt(Math.pow(e.targetTouches[0].clientX - e.targetTouches[1].clientX,2) + Math.pow(e.targetTouches[0].clientY - e.targetTouches[1].clientY,2));
if(e.targetTouches.length >= 2){
oBox.addEventListener('touchmove',fnMove,false);
oBox.addEventListener('touchend',fnEnd,false);
}
function fnMove(e) {
e.preventDefault();
e.cancelBubble = true;
if(e.targetTouches.length >= 2){
let dis2 = Math.sqrt(Math.pow(e.targetTouches[0].clientX - e.targetTouches[1].clientX,2) + Math.pow(e.targetTouches[0].clientY - e.targetTouches[1].clientY,2));
oBox.style.width = dis2*w/dis + 'px';
oBox.style.lineHeight= oBox.style.height = dis2*h/dis + 'px';
}
}
function fnEnd() {
oBox.removeEventListener('touchmove',fnMove,false);
oBox.removeEventListener('touchend',fnEnd,false);
}
},false);
}
5.方向ロック&bannerスクロール&ドロップダウンリフレッシュ
&banner &
document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
let banner = document.getElementById('banner');
let content = document.getElementById('content');
let load_more = document.getElementsByClassName('load_more')[0];
let banner_ul = banner.children[0];
let banner_left = 0;
let content_top = 0;
function loadData(fn) {
$.ajax({
url: 'data.txt?t=' + Math.random(),
success(str){
let arr = str.split('
');
$('ol').html('');
arr.forEach(s=>{
$(`<li>${s}</li>`).appendTo('ol');
});
fn&&fn();
},
error(){
alert(' ');
}
})
}
loadData();
banner.addEventListener('touchstart',function (e) {
let startX = e.targetTouches[0].clientX; // X
let startY = e.targetTouches[0].clientY; // Y
let dir = ''; //
let disX = startX - banner_left;
let disY = startY - content_top;
banner_ul.style.transition = '';
content.style.transition = '';
function fnMove(e) {
let x = e.targetTouches[0].clientX;
let y = e.targetTouches[0].clientY;
// 5
if(!dir){
if(Math.abs(x- startX) >= 5){
dir = 'x';
}else if(Math.abs(y - startY) >= 5){
dir = 'y';
}
}else{
if(dir === 'x'){ // banner
banner_left = x - disX;
banner_ul.style.transform = `translateX(${banner_left}px)`;
}else if(dir === 'y'){ //
content_top = y - disY;
if(content_top > 0){
content.style.transform = `translateY(${content_top/3}px)`;
if(content_top >= 100){
load_more.innerHTML = ' ';
}else{
load_more.innerHTML = ' ';
}
}else{
content.style.transform = `translateY(${content_top}px)`;
}
}
}
}
function fnEnd() {
banner.removeEventListener('touchmove',fnMove,false);
banner.removeEventListener('touchend',fnEnd,false);
if(dir === 'x'){ // banner
let n = Math.round(-banner_left/banner.offsetWidth);
if(n < 0){
n = 0;
}else if(n >= banner_ul.children.length){
n = banner_ul.children.length - 1;
}
banner_left = -n * banner.offsetWidth;
banner_ul.style.transition = '0.7s all ease';
banner_ul.style.transform = `translateX(${banner_left}px)`;
}else if(dir === 'y'){ //
if(content_top >= 100){
content_top = 30;
load_more.innerHTML = ' ...';
loadData(function () {
load_more.innerHTML = ' ';
content_top = 0;
content.style.transition = '0.7s all ease';
content.style.transform = `translateY(${content_top}px)`;
})
}else{
content_top = 0;
}
content.style.transition = '0.7s all ease';
content.style.transform = `translateY(${content_top}px)`;
}
}
banner.addEventListener('touchmove',fnMove,false);
banner.addEventListener('touchend',fnEnd,false);
},false);
6.ダブルクリック+長押し
+
document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
let btn = document.getElementById('btn');
let t = 0;
let lastTap = 0;
let timer = null;
btn.addEventListener('touchstart',function () {
t = Date.now();
timer = setTimeout(function () {
console.log(' ');
},1500);
},false);
btn.addEventListener('touchend',function () {
clearTimeout(timer);
if(Date.now() - t <= 700){
console.log('tap');
if(Date.now() - lastTap <= 300){
console.log('double tap');
}
lastTap = Date.now();
}else{
console.log('long tap');
}
},false);