Question

我有一个带有一系列拇指的图库。两者都根据与产品关联的图像数量动态加载。您可以单击拇指来获取该系列图像。在移动设备上，您可以向左和向右滑动以查看所有图像。一切正常。

这是我的问题：当您尝试向下滚动页面时，您碰巧碰到其中一张主要图像时，您会卡住并且页面不会移动。对于我的生活，我无法找到解决这个问题的方法。我想知道是否有人曾经遇到过这个并找到了解决方案。我认为有一种方法可以通过touch-punch.js来控制它，但无法弄明白。谢谢。

这是我的简化图库HTML：

<ul id="Gallery" class="gallery productGalleryInner">
<li>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
</li>
</ul>

</div>

的CSS：

#productGalleryWrap {
overflow: hidden;
margin: 7px 10px 0;
}

#productGalleryWrap .productGalleryInner {
white-space: nowrap;
}

#productGalleryWrap .productGalleryInner li {
display: inline;
}   

#productGalleryWrap .productGalleryInner img {
display: inline;
width: 50%;
}

我使用touch-punch.js来控制水平拖动。这是代码：

(function ($) {

  // Detect touch support
  $.support.touch = 'ontouchend' in document;

  // Ignore browsers without touch support
  if (!$.support.touch) {
return;
  }

      var mouseProto = $.ui.mouse.prototype,
      _mouseInit = mouseProto._mouseInit,
      touchHandled;

  /**
   * Simulate a mouse event based on a corresponding touch event
   * @param {Object} event A touch event
  * @param {String} simulatedType The corresponding mouse event
  */
  function simulateMouseEvent (event, simulatedType) {

    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) {
     return;
   }

    event.preventDefault();

    var touch = event.originalEvent.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvents');

// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
  simulatedType,    // type
  true,             // bubbles                    
  true,             // cancelable                 
  window,           // view                       
  1,                // detail                     
  touch.screenX,    // screenX                    
  touch.screenY,    // screenY                    
  touch.clientX,    // clientX                    
  touch.clientY,    // clientY                    
  false,            // ctrlKey                    
  false,            // altKey                     
  false,            // shiftKey                   
  false,            // metaKey                    
  0,                // button                     
  null              // relatedTarget              
    );

    // Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
  }

  /**
   * Handle the jQuery UI widget's touchstart events
   * @param {Object} event The widget element's touchstart event
   */
  mouseProto._touchStart = function (event) {

   var self = this;

    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
      return;
    }

    // Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;

    // Track movement to determine if interaction was a click
self._touchMoved = false;

    // Simulate the mouseover event
simulateMouseEvent(event, 'mouseup');

    // Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');

    // Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
  };

            mouseProto._touchMove = function (event) {

    // Ignore event if not handled
    if (!touchHandled) {
  return;
    }

// Interaction was not a click
this._touchMoved = true;

// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
  };

   /**
   * Handle the jQuery UI widget's touchend events
   * @param {Object} event The document's touchend event
   */
  mouseProto._touchEnd = function (event) {

// Ignore event if not handled
if (!touchHandled) {
  return;
}

// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');

// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');

// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {

  // Simulate the click event
  simulateMouseEvent(event, 'click');
}

// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
  };

  /**
   * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
   * This method extends the widget with bound touch event handlers that
   * translate touch events to mouse events and pass them to the widget's
   * original mouse event handling methods.
   */
  mouseProto._mouseInit = function () {

var self = this;

// Delegate the touch handlers to the widget's element
self.element
  .bind('touchstart', $.proxy(self, '_touchStart'))
  .bind('touchmove', $.proxy(self, '_touchMove'))
  .bind('touchend', $.proxy(self, '_touchEnd'));

// Call the original $.ui.mouse init method
_mouseInit.call(self);
  };

})(jQuery);

如果需要更多信息，请告诉我。感谢。

Answer 1

有点迟到的回答，但我在正在进行的当前项目中遇到了同样的问题。

评论：

event.preventDefault();

在以下后添加：

document.ontouchmove = function(e) {
    var target = e.currentTarget;
    while(target) {
        if(checkIfElementShouldScroll(target))
            return;
        target = target.parentNode;
    }

    e.preventDefault();
};

Dolla dolla对你们说话。

从此主题获取的代码：document.ontouchmove and scrolling on iOS 5

jQuery移动图片库默认垂直滚动问题

1 个答案: