Cách KHÔNG nhấp vào a href trong khi kéo iScroll

Question

Tôi đã bật iScroll trên my page.

Lưu ý hình ảnh trong cuộn là các liên kết (vì vậy cửa sổ bật lên mở ra cho hình ảnh lớn hơn, bạn biết giao dịch). NHƯNG một trong những tính năng đáng yêu của iScroll là bạn có thể kéo chuột để cuộn. NHƯNG bây giờ, khi ai đó kéo nó, nó sẽ tự động mở hình ảnh thay vì di chuyển thanh. Có cách giải quyết nào không?

Answer 1

Tôi sẽ nói nối thêm một lớp vào mỗi neo trong khi cuộn đang được kéo. Ví dụ, thêm một tên lớp của "kéo" vào mỗi neo trong khi được kéo sau đó loại bỏ các lớp khi kéo dừng lại.

Điều đó có nghĩa là bạn có thể thêm preventDefault vào bất kỳ liên kết nào có lớp "kéo". Nội dung nào đó dọc theo dòng:

myScroll1 = new iScroll('scroll1', { 
     snap: 'li', 
     momentum: false, 
     hScrollbar: false, 
     onScrollStart: function() { 
      $('div#iscroll1 a').addClass("dragging"); 
     }, 
     onScrollEnd: function() { 
      $('div#iscroll1 a').removeClass("dragging"); 
      document.querySelector('.indicator > li.active').className = ''; 
      document.querySelector('.indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; 
     } 
    }); 
    $('.dragging').click(function (e) { 
     e.preventDefault(); 
    } 

Đây là mã chưa được kiểm tra để bạn có thể cần tinh chỉnh bộ chọn.

Answer 2

Tôi đã tạo bản vá cho iScroll để khắc phục vấn đề này. Bạn có thể xem diff đây: https://github.com/zmathew/iscroll/commit/3d77681a9f4b3a6b5a7579df4443bc53356d5584

Hoặc bạn có thể lấy các bản vá toàn bộ iScroll từ đây: https://github.com/zmathew/iscroll/tree/prevent-scroll-clicks

Answer 3

Xin chào phiên bản ở đây là sửa đổi của iScroll 4.2.5 tải

iScroll 4.2.5 + click fix

onBeforeScrollStart: function (e) {if(!hasTouch) e.preventDefault();}, 

Answer 4

giải pháp không hiệu quả đối với tôi, đây là cách khắc phục đơn giản của tôi. Đặt kéo thành true khi kéo, đặt thành false khi không. Nếu nhấp vào khi kéo, hãy bỏ qua nó.

var myScroll = new iScroll("scroll1", { onBeforeScrollMove: function() { 
      window.dragging = true; 
     }, 
      onScrollEnd: function() { 
       //had to use a timeout here because without it it would fire on links at the end of the drag/dragging slowly 
       setTimeout(function() { 
        window.dragging = false; 
       }, 10); 
      } 

     }); 

và trên neo kiểm tra kéo

$(".myanchors a").click(function() { 
     if (window.dragging) { 
      return false; 
     } 
    });