jQuery 모바일 이미지 갤러리 기본 수직 스크롤 문제

일련의 엄지 손가락이있는 이미지 갤러리가 있습니다. 둘 다 제품과 연관된 이미지 수에 따라 동적으로로드됩니다. 엄지 손가락을 클릭하여 일련의 이미지를 얻을 수 있습니다. 휴대 기기에서는 왼쪽과 오른쪽으로 스 와이프하여 모든 이미지를 볼 수 있습니다. 그건 모두 잘 작동합니다.jQuery 모바일 이미지 갤러리 기본 수직 스크롤 문제

여기 내 문제가 있습니다. 페이지를 아래로 스크롤하려고하면 메인 이미지 중 하나를 만지고 페이지가 멈추어 페이지가 움직이지 않습니다. 내 인생에서 나는이 문제를 해결할 수 없다. 나는 누군가가 이것을 만났을 때 궁금해하며 해결책을 찾아 냈다. 나는 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 : 나는 수평 드래그를 제어하는 터치 punch.js을 사용하고

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

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

#productGalleryWrap .productGalleryInner li { 
display: inline; 
} 

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

. 다음은 코드입니다.

(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);

자세한 정보가 필요한 경우 알려주십시오. 감사.

출처

2012-06-13 Jsh Fln

늦은 대답의 종류지만 현재 진행중인 프로젝트에서 이와 동일한 문제가있었습니다.

을 주석 :

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

    e.preventDefault(); 
};

달러 요 달러 요 요금 너희들 :

event.preventDefault();

이 후이를 추가합니다.

이 스레드에서 가져온 코드 document.ontouchmove and scrolling on iOS 5

출처

2012-12-05 14:59:46

jQuery 모바일 이미지 갤러리 기본 수직 스크롤 문제

답변

관련 문제