Tắt điều hướng trang web khi vuốt (quay lại và tiến)

Question

Trên điện thoại Windows, người dùng IE có thể quay lại và chuyển tiếp bằng cách vuốt trên màn hình nếu thao tác vuốt đến từ cạnh. Chức năng cấp hệ điều hành này đang cản trở UX của trang web của tôi.

Có bất kỳ js hoặc css nào có thể vô hiệu hóa tính năng đó không? Một số hack cũng sẽ làm.

Một ảnh chụp từ trang web WindowsPhone của:

Dưới đây là liên kết tới trang tài liệu tham khảo: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch

Xin lưu ý rằng tôi vẫn cần touchaction kích hoạt cho cuộn ngang.

Answer 1

Cách ngăn tác vụ mặc định của sự kiện vuốt. Một nơi nào đó trong document.ready của bạn thêm (lưu ý tôi đã bao gồm các document.ready trong ví dụ này, chỉ có các chức năng cần phải được bổ sung):

$(document).ready(function(){ $(window).on('touchmove',function(e){e.preventDefault();}); });

Trong trường hợp này tôi tin rằng sự kiện này được gọi là 'touchmove 'bạn có thể cần phải mở rộng này cũng bỏ qua hành vi mặc định của touchstart/touchend nhưng tôi không chắc chắn 100%.

Answer 2

Đây cũng là vấn đề đối với người dùng Mac đã định cấu hình vuốt sang trái để điều hướng ngược. Bạn không thể tắt cài đặt này nhưng bạn có thể nhắc người dùng xác nhận rằng họ định điều hướng đi https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload.

Answer 3

Sao chép và dán JavaScript này:

var xPos = null; 
var yPos = null; 
window.addEventListener("touchmove", function (event) { 
    var touch = event.originalEvent.touches[ 0 ]; 
    oldX = xPos; 
    oldY = yPos; 
    xPos = touch.pageX; 
    yPos = touch.pageY; 
    if (oldX == null && oldY == null) { 
     return false; 
    } 
    else { 
     if (Math.abs(oldX-xPos) > Math.abs(oldY-yPos)) { 
      event.preventDefault(); 
      return false; 
     } 
    } 
}); 

Nếu bạn muốn nó minified, sao chép và dán này:

var xPos=null;var yPos=null;window.addEventListener("touchmove",function(event){var touch=event.originalEvent.touches[0];oldX=xPos;oldY=yPos;xPos=touch.pageX;yPos=touch.pageY;if(oldX==null && oldY==null){return false;}else{if(Math.abs(oldX-xPos)>Math.abs(oldY-yPos)){event.preventDefault();return false;}}});

Answer 4

*{ 
    -webkit-touch-callout: none; 
} 

Kết quả là để tắt hoàn toàn bất kỳ sự kiện liên lạc

Answer 5

Khám phá this Codepen của David Hill.

var elem = document.getElementById("container"); //area we don't want touch drag 

var defaultPrevent=function(e){e.preventDefault();} 
elem.addEventListener("touchstart", defaultPrevent); 
elem.addEventListener("touchmove" , defaultPrevent); 

Tôi thực sự nghĩ đây cũng là một cách hay để xây dựng các đối tượng.