在 iPhone 上触摸事件
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
相关文章:
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 如何在jquery中找到鼠标滚轮/触摸移动事件的走向
- 如何使用纯javascript的移动触摸事件
- 触摸启动事件未在iframe iOS 6中启动
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- 触摸滑动所有事件
- 移动定时触摸事件
- 模拟html5的触摸事件
- Phonegap/Cordova:如何添加Javascript多点触摸事件
- 如何在AngularJS中监听点击事件,而不是触摸事件
- 我可以让我的网站的内容可编辑区域对安卓股票浏览器上的触摸事件更敏感吗
- 当鼠标也在触摸另一个元素时,d3.js鼠标悬停事件未被触发
- 在 Firefox 中“解析”触摸事件
- 将触摸事件转换为鼠标事件仅每秒有效一次
- 在移动 Safari 上向下拖动时,触摸事件停止触发 - iPad HTML5
- 如何在 javascript 中触发触摸事件
- 为什么触摸事件不在手指按压的中间
- 如何启用离子多点触摸事件
- JavaScript事件.触摸数组
- D3鼠标事件触摸事件,即点击->支持触摸事件