페이지의 요소와 상호 작용할 때 스 와이프 이벤트 방지

Question

본질적으로 일련의 슬라이드 인 iPad 애플리케이션을 구축 중입니다.

슬라이드를 읽었을 때 다음 슬라이드로 스 와이프 할 수 있습니다 (Zepto의 스 와이프 사용). 다음 슬라이드로 window.location을 변경합니다. (스 와이프 이벤트는 전체 페이지에서 작동해야하므로 window.body에 바인딩됩니다.) ...

여기에 문제가 있습니다. 일부 슬라이드에는 단추, 드래그 할 수있는 항목 등의 대화 형 요소가 있습니다. 문제는 스 와이프 이벤트는 이러한 대화식 요소 중 일부를 사용할 때 트리거됩니다.

이 경우에 스 와이프가 트리거되지 않도록하는 방법을 알고있는 사람이 있습니까? 아마도 감도 등을 설정합니까?

내가 곤혹 스럽다. ...

대단히 감사합니다.

Answer 1

방법 Zepto는 document.body에 touchstart, touchend 및 touchmove 이벤트에 청취자를 결합입니다 터치 이벤트를 관리합니다. 그런 다음 전송할 이벤트를 계산하고 touchstart 이벤트를 수신 한 요소에서 이벤트를 트리거합니다. 그런 다음이 이벤트는 DOM 트리를 통해 각 요소의 리스너를 호출합니다.

이 우리에게 예방 슬쩍 이벤트의 두 가지 방법을 제공합니다

첫째, 당신은 같은 것을 할 수있는 : 당신의 자식 요소가 하나 개의 터치 이벤트를 받았을 경우

이

$('#my-child-element').bind('touchstart touchend touchup', function(event) { 
    event.stopPropagation(); 
}); 

, 그것은으로 전파되는 것을 방지됩니다 부모 요소, 가장 중요한 것은 body 태그. 이렇게하면 Zepto 터치 프로세서가 아무 것도하지 못하게하고 해당 요소에서 작동하는 동안 스 와이프, 탭, 단일 탭, longTap 및 doubleTap 이벤트를 차단합니다.

도 슬쩍 이벤트 거품, 당신은 또한 단지 페이지 변경을 청취하여 요소에 버블 링에서 해당 특정 이벤트를 막을 수 있으므로 와이프 : 이것은 여전히 ​​Zepto가 내부 이벤트를 생성받을 수

$('#my-child-element').bind('swipeLeft swipeRight', function(event) { 
    event.stopPropagation(); 
}); 

당신의 하위 요소는 있지만 외부는 아닙니다. Zepto 탭 이벤트는 여전히 자녀의 모든 요소에 적용됩니다. 여기

바이올린 : http://jsfiddle.net/bnickel/dUuUd/

Answer 2

희망 "excludedElements"방법은 아래처럼 당신을 도울 것입니다.

$(".block").swipe({ 
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) { 

    }, 
    excludedElements: ".link, a", 
    threshold: 0 
});