[英]Touch events on iPhone
我正在嘗試制作一個可以在觸摸事件中系統地打開的畫布菜單。 當我單擊主體並將其拖動以打開菜單時,它在瀏覽器上可以正常工作。
但是,在iPhone上失敗。 我的控制台上顯示的錯誤是
TypeError: 'undefined' is not an object (evaluating 'event.touches[0]')
在此功能上:
getTouchCoordinates: function(event) {
if ( s.touchSupported ) {
var touchEvent = event.touches[0];
return { x:touchEvent.pageX, y:touchEvent.pageY }
}
else {
return { x:event.screenX, y:event.screenY };
}
},
菜單的完整代碼如下:
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var s,
app = {
settings: {
touchSupported: ('ontouchstart' in window),
start_event: "",
move_event: "",
end_event: "",
main: $("#body"),
sidebar: $("#sidebar"),
gestureStarted: false,
bodyOffset: 0,
sidebarWidth: 250,
gestureStartPosition: "",
gestureS: "",
target: ""
},
init: function() {
s = this.settings;
this.touchHandlers();
this.bindUIActions();
},
bindUIActions: function() {
s.main.bind(s.start_event, function(e){
s.gestureStartPosition = app.getTouchCoordinates(e);
s.gestureS = app.getTouchCoordinates(e);
s.main.bind(s.move_event, function(e){
var pos = app.getTouchCoordinates(e);
var currentPosition = app.getTouchCoordinates( event );
if ( s.gestureStarted ) {
event.preventDefault();
event.stopPropagation();
app.updateBasedOnTouchPoints( currentPosition.x );
return;
}
else {
if ( Math.abs( currentPosition.y - s.gestureStartPosition.y ) > 50 ) {
//unbind events here
s.main.unbind(s.end_event);
s.main.unbind(s.move_event);
return;
}
else if ( Math.abs( currentPosition.x - s.gestureStartPosition.x ) > 0 ) {
s.gestureStarted = true;
event.preventDefault();
event.stopPropagation();
app.updateBasedOnTouchPoints( currentPosition.x );
return;
}
}
});
s.main.bind(s.end_event, function(e){
var currentPosition = app.getTouchCoordinates( event );
if ( s.gestureStarted ) {
s.main.css("left", "0px" );
//console.log(s.gestureS.x+" "+currentPosition.x);
var c = s.bodyOffset ;
var t;
// check if open or close
if ( (s.gestureS.x - currentPosition.x) < 0 ) {
//console.log("open");
t = s.sidebarWidth;
} else {
//console.log("close");
t = 0 ;
}
if ( c != t ) {
s.main.stop(true, false).animate({
left:t,
avoidTransforms:false,
useTranslate3d: true
}, 100);
s.sidebar.trigger( "slidingViewProgress", { current:t, max:s.sidebarWidth } );
}
}
s.gestureStarted = false;
//unbind events here
s.main.unbind(s.end_event);
s.main.unbind(s.move_event);
});
});
},
touchHandlers: function() {
s.start_event = s.touchSupported ? 'touchstart' : 'mousedown';
s.move_event = s.touchSupported ? 'touchmove' : 'mousemove';
s.end_event = s.touchSupported ? 'touchend' : 'mouseup';
},
getTouchCoordinates: function(event) {
if ( s.touchSupported ) {
var touchEvent = event.touches[0];
return { x:touchEvent.pageX, y:touchEvent.pageY }
}
else {
return { x:event.screenX, y:event.screenY };
}
},
updateBasedOnTouchPoints: function( currentPosition ) {
var deltaX = (currentPosition - s.gestureStartPosition.x) ;
var targetX = (s.bodyOffset + deltaX);
targetX = Math.max( targetX, 0 );
targetX = Math.min( targetX, s.sidebarWidth );
s.bodyOffset = targetX;
s.target = targetX;
if ( s.main.css("left") != "0px" ) {
s.main.css("left", "0px" );
}
s.main.css("-webkit-transform", "translate3d(" + targetX + "px,0,0)" );
s.main.css("-moz-transform", "translate3d(" + targetX + "px,0,0)" );
s.main.css("transform", "translate3d(" + targetX + "px,0,0)" );
s.sidebar.trigger( "slidingViewProgress", { current: targetX, max:s.sidebarWidth } );
s.gestureStartPosition.x = currentPosition;
}
};
(function() {
app.init();
})();
你能試一下嗎:
event.originalEvent.touches
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.