モバイル側イベント共通関数整理バックアップ
9572 ワード
tapイベント
tapイベントはpcブラウザでのclick効果に相当し、タッチスクリーンデバイスではclickイベントは依然として使用可能であるが、多くのデバイスではclickに遅延があり、迅速に応答する「click」イベントが必要な場合はtouchイベントによって実現する必要がある.
互換性のあるPC側、およびtouchをサポートしていないイベント
doubleTapイベント
doubleTapイベントは、指が同じ位置範囲内と極めて短い時間でスクリーンを2回ノックしたときにトリガーされるイベントです.一部のブラウザではdoubleTapイベントでテキストが選択されます.テキストを選択しない場合は、要素にuser-select:noneのcssプロパティを追加できます.
longTapイベント
longTapイベントは、指が長時間画面を押して動かないときにトリガーされるイベントです.
swipeイベント
swipeイベントは、指が画面上をスライドするとトリガーされるイベントであり、指のスライド方向によってswipe Left(左)、swipe Right(右)、swipe Up(上)、swipe Down(下)に分けられる.
パッケージの完了:
https://github.com/chenmnkken/monoevent/wiki/MonoEvent-%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3
http://levi.cg.am/archives/3546
tapイベントはpcブラウザでのclick効果に相当し、タッチスクリーンデバイスではclickイベントは依然として使用可能であるが、多くのデバイスではclickに遅延があり、迅速に応答する「click」イベントが必要な場合はtouchイベントによって実現する必要がある.
element.addeventlistener( 'touchstart', function( e ){
var touches = e.touches[0];
starttx = touches.clientx;
startty = touches.clienty;
}, false );
element.addeventlistener( 'touchend', function( e ){
var touches = e.changedtouches[0],
endtx = touches.clientx,
endty = touches.clienty;
// touch ，
if( math.abs(starttx - endtx) < 6 && math.abs(startty - endty) < 6 ){
console.log( 'fire tap event' );
}
}, false );
； ：<button id="btn"> </button>
<script>
var mySky = {
tap: function(obj, fun) {
var start_x = 0,
start_y = 0;
obj.addEventListener('touchstart',function(e){
start_x = e.touches[0].clientX;
start_y = e.touches[0].clientY; //IE ， 0 2
document.addEventListener('touchend', touEnd, false);
});
function touEnd(e){
var endX = e.changedTouches[0].clientX,
endY = e.changedTouches[0].clientY;
if(Math.abs(endX - start_x) < 6 && Math.abs(endY - start_y) < 6) {
fun.call(obj,e);
}
document.removeEventListener('touchend', touEnd, false);
};
}
}
var btn=document.getElementById("btn");
mySky.tap(btn,function(){
alert(' ');
});
</script>互換性のあるPC側、およびtouchをサポートしていないイベント
var mySky = {
tap: function(obj, fun) {
var start_x = 0,
start_y = 0,
ontouchstart='ontouchstart' in window? "touchstart":"mousedown", // touch
ontouchend='ontouchend' in window? "touchend":"mouseup";
obj.addEventListener(ontouchstart,function(e){
var e=e||window.event;
start_x = e.changedTouches? e.touches[0].clientX : e.clientX;
start_y = e.changedTouches? e.touches[0].clientY : e.clientY; //IE ， 0 2
document.addEventListener(ontouchend, touEnd(e),false);
});
function touEnd(e){
var endX = e.touches? e.touches[0].clientX : e.clientX;
var endY = e.touches? e.touches[0].clientY : e.clientY;
if(Math.abs(endX - start_x) < 6 && Math.abs(endY - start_y) < 6) {
fun.call(obj,e);
}
// console.log(' asdasd'+endX);
document.removeEventListener(ontouchend, touEnd, false);
};
}
}
doubleTapイベント
doubleTapイベントは、指が同じ位置範囲内と極めて短い時間でスクリーンを2回ノックしたときにトリガーされるイベントです.一部のブラウザではdoubleTapイベントでテキストが選択されます.テキストを選択しない場合は、要素にuser-select:noneのcssプロパティを追加できます.
var isTouchEnd = false,
lastTime = 0,
lastTx = null,
lastTy = null,
firstTouchEnd = true,
body = document.body,
dTapTimer, startTx, startTy, startTime;
element.addEventListener( 'touchstart', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
}
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
}, false );
element.addEventListener( 'touchend', function( e ){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
now = Date.now(),
duration = now - lastTime;
// tap
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
// tap 500
if( duration < 301 ){
// tap tap
if( lastTx !== null &&
Math.abs(lastTx - endTx) < 45 &&
Math.abs(lastTy - endTy) < 45 ){
firstTouchEnd = true;
lastTx = lastTy = null;
console.log( 'fire double tap event' );
}
}
else{
lastTx = endTx;
lastTy = endTy;
}
}
else{
firstTouchEnd = true;
lastTx = lastTy = null;
}
lastTime = now;
}, false );
// iOS safari ，
// touchstart touchend
// touch click
if( ~navigator.userAgent.toLowerCase().indexOf('iphone os') ){
body.addEventListener( 'touchstart', function( e ){
startTime = Date.now();
}, true );
body.addEventListener( 'touchend', function( e ){
var noLongTap = Date.now() - startTime < 501;
if( firstTouchEnd ){
firstTouchEnd = false;
if( noLongTap && e.target === element ){
dTapTimer = setTimeout(function(){
firstTouchEnd = true;
lastTx = lastTy = null;
console.log( 'fire double tap event' );
}, 400 );
}
}
else{
firstTouchEnd = true;
}
}, true );
// iOS click
element.addEventListener( 'click', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
firstTouchEnd = true;
}
}, false );
}
longTapイベント
longTapイベントは、指が長時間画面を押して動かないときにトリガーされるイベントです.
var startTx, startTy, lTapTimer;
element.addEventListener( 'touchstart', function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
lTapTimer = setTimeout(function(){
console.log( 'fire long tap event' );
}, 1000 );
e.preventDefault();
}, false );
element.addEventListener( 'touchmove', function( e ){
var touches = e.touches[0],
endTx = touches.clientX,
endTy = touches.clientY;
if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false );
element.addEventListener( 'touchend', function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false );
swipeイベント
swipeイベントは、指が画面上をスライドするとトリガーされるイベントであり、指のスライド方向によってswipe Left(左)、swipe Right(右)、swipe Up(上)、swipe Down(下)に分けられる.
var isTouchMove, startTx, startTy;
element.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );
element.addEventListener( 'touchmove', function( e ){
isTouchMove = true;
e.preventDefault();
}, false );
element.addEventListener( 'touchend', function( e ){
if( !isTouchMove ){
return;
}
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;
if( Math.abs(distanceX) >= Math.abs(distanceY) ){
if( distanceX > 20 ){
console.log( 'fire swipe left event' );
isSwipe = true;
}
else if( distanceX < -20 ){
console.log( 'fire swipe right event' );
isSwipe = true;
}
}
else{
if( distanceY > 20 ){
console.log( 'fire swipe up event' );
isSwipe = true;
}
else if( distanceY < -20 ){
console.log( 'fire swipe down event' );
isSwipe = true;
}
}
if( isSwipe ){
console.log( 'fire swipe event' );
}
}, false );
パッケージの完了:
https://github.com/chenmnkken/monoevent/wiki/MonoEvent-%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3
http://levi.cg.am/archives/3546