在 iPhone 上触摸事件

Touch events on iPhone

本文关键字:事件 触摸 iPhone      更新时间:2023-09-26

我正在尝试制作一个可以在触摸事件上系统地打开的画布外菜单。当我单击正文并拖动它以打开菜单时,它在我的浏览器上运行良好。

但是,它在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