Ngăn cuộn trang khi kéo trong IOS và Android

Question

Tôi đang làm việc trên trò chơi canvas html5 nhưng tôi không biết cách xử lý các sự kiện chạm. Khi người dùng chạm vào màn hình và kéo, khi đó trình duyệt sẽ cuộn trang. Tôi muốn ngăn chặn nó, và bắt đầu cảm ứng, và chạm vào vị trí kết thúc. Có thể không?

Cảm ơn trước

Answer 1

Bạn cần ghi đè hành vi chạm mặc định để ngừng chạm vào kéo trang. Rõ ràng, bạn sẽ cần phải xử lý chúng một lần nữa nếu trang của bạn trở nên lớn hơn khu vực có sẵn, nhưng khi bạn đang thực hiện một trò chơi, giả sử bạn đang thực hiện bố cục 100%/100%.

Mã này là từ mặc định phonegap index.html nhưng sẽ giúp bạn, tôi chắc chắn.

function preventBehavior(e) { 
    e.preventDefault(); 
}; 

document.addEventListener("touchmove", preventBehavior, false); 

Tôi muốn thêm một điều nữa là bạn hoàn toàn đi đúng hướng để tránh các khuôn khổ. Chúng rất tuyệt vời cho một số thứ, nhưng bạn sẽ nhận được kết quả tốt hơn rất nhiều từ nền tảng.

Chỉnh sửa: đây là số W3C working draft nói về các sự kiện chạm, có thể hữu ích cho bạn.

Answer 2

canvas.addEventListener('touchstart', function(e) 
{ 
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY); 
} 
canvas.addEventListener('touchend', function(e) 
{ 
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY); 
} 

Dưới đây là một bài viết tốt về chạm và cử chỉ trên điện thoại di động:

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Answer 3

Nếu bạn không muốn sử dụng jQuery thoại di động hoặc bất kỳ thư viện khác rồi bạn có thể thử điều này.

var startX, startY, endX, endY; 
document.addEventListener("touchstart", function(e){ 
    startX = e.touches[0].pageX; 
    startY = e.touches[0].pageY; 

    e.preventDefault();//Stops the default behavior 
}, false); 

document.addEventListener("touchend", function(e){ 
    endX = e.touches[0].pageX; 
    endY = e.touches[0].pageY; 

    e.preventDefault();//Stops the default behavior 
}, false); 

Answer 4

Do vi phạm các thay đổi được thực hiện trong các phiên bản Chrome gần đây, các câu trả lời ở trên không còn chính xác nữa. Gắn trình nghe sự kiện cảm ứng vào tài liệu hoặc phần tử nội dung sẽ khiến trình xử lý sự kiện được đăng ký ở chế độ "thụ động", điều này làm cho các cuộc gọi đến preventDefault bị bỏ qua.

Có hai giải pháp:

• Các giải pháp ưu tiên là sử dụng CSS phong cách touch-action để xác định rằng không di chuyển nên xảy ra (ví dụ với giá trị "none")

• Trong trường hợp điều này không thích hợp (ví dụ: nếu loại tương tác sẽ thay đổi động theo cách không thể xác định trước khi cử chỉ bắt đầu) thì trình xử lý sự kiện phải được đăng ký với tham số thứ ba được đặt thành { passive: false } (bạn nên thực hiện phát hiện trình duyệt để đảm bảo rằng phong cách được hỗ trợ đầu tiên, t hough).