Ngăn các sự kiện Trượt khi tương tác với các thành phần trên một trang

Question

Tôi đang xây dựng một ứng dụng iPad vốn chủ yếu là một loạt các trang trình bày.

Khi tôi đọc xong trang trình bày, tôi có thể vuốt sang trang chiếu tiếp theo * (sử dụng thao tác vuốt của Zepto) để thay đổi window.location sang trang trình bày tiếp theo. (sự kiện vuốt được ràng buộc với window.body vì nó cần phải hoạt động trên toàn bộ trang) ...

Đây là vấn đề: một số trang trình bày có các yếu tố tương tác như nút, mục có thể kéo, v.v. sự kiện vuốt được kích hoạt khi sử dụng một số yếu tố tương tác này.

Có ai biết cách ngăn chặn vuốt từ kích hoạt trong các trường hợp này không? Có lẽ thiết lập một độ nhạy vv?

Tôi đang stumped ...

Lời chúc tốt đẹp nhất và cảm ơn !!

Answer 1

Cách Zepto quản lý sự kiện chạm là nó liên kết người nghe với các sự kiện touchstart, touchend và touchmove trên document.body. Sau đó, nó thực hiện các tính toán về sự kiện nào cần gửi và kích hoạt sự kiện trên phần tử đã nhận được sự kiện touchstart. Sự kiện này sau đó bong bóng lên qua cây DOM gợi lên người nghe của mỗi phần tử.

này cho chúng ta hai cách để ngăn chặn sự kiện swipe:

Thứ nhất, bạn có thể làm một cái gì đó như:

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

Khi phần tử con của bạn nhận được một trong một sự kiện liên lạc, nó sẽ ngăn chặn nó từ tuyên truyền đến các phần tử cha, quan trọng nhất là thẻ body. Điều này ngăn không cho bộ xử lý cảm ứng Zepto làm bất cứ điều gì, chặn các sự kiện vuốt, nhấn, singleTap, longTap và doubleTap xảy ra trong khi hoạt động trong phần tử đó.

Bởi vì sự kiện swipe cũng bong bóng, bạn có thể cũng chỉ ngăn chặn những sự kiện cụ thể từ các bọt để yếu tố của bạn mà nghe thay đổi trang swipes:

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

này sẽ cho phép bạn vẫn nhận được Zepto tạo ra các sự kiện bên trong của bạn yếu tố con nhưng không ở bên ngoài. Sự kiện nhấn Zepto cũng sẽ vẫn hoạt động đối với tất cả các yếu tố trong con bạn.

Fiddle ở đây: http://jsfiddle.net/bnickel/dUuUd/

Answer 2

Hope "excludedElements" phương pháp sẽ giúp bạn, như dưới đây.

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

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