Jquery touchmove event fire when zoom mobile screen
Hi to all,
I have a web page where i used touchmove event to navigate from one page to another.Now the problem is when i am trying to zoom the mobile screen IOS or Android it fire the touchmove event and page changed.
How i can prevent touchmove mean navigation through touchmove while zoom the mobile screen.
Here is the code for move from one next and previour page
- var currentX;
- var currentY;
- var lastX = 0;
- var lastY = 0;
- var lastT;
- $(document).bind('touchmove', function(e) {
-
- // If still moving clear last setTimeout
- clearTimeout(lastT);
- currentX = e.originalEvent.touches[0].clientX;
- currentY = e.originalEvent.touches[0].clientY;
- // After stoping or first moving
- if(lastX == 0) {
- lastX = currentX;
- }
- if(lastY == 0) {
- lastY = currentY;
- }
-
- var dirX = currentX - lastX;
- var dirY = currentY - lastY;
-
-
- //$('.collection-name').html("Last X="+dirX+"----------Last Y="+dirY);
- if(Math.abs(parseFloat(dirX)) > Math.abs(parseFloat(dirY)))
- { //$('.collection-name').html("Inside Last X="+Math.abs(dirX)+"----------Last Y="+Math.abs(dirY));
- if(parseFloat(currentX) < parseFloat(lastX)) {
- // $('.collection-name').html($('.next-product-container a.next-product').attr("href"));
- if($('.next-product-container a.next-product').attr("href").length !=='undefined')
- {
- window.location.href=$('.next-product-container a.next-product').attr("href");
- }
- } else if(parseFloat(currentX) > parseFloat(lastX)){
- // $('.collection-name').html($('.prev-product-container a.prev-product').attr("href"));
- if($('.prev-product-container a.prev-product').attr("href").length !=='undefined')
- {
- window.location.href=$('.prev-product-container a.prev-product').attr("href");
- }
- }
-
- }
-
-
-
-
- // Save last position
- lastX = currentX;
- lastY = currentY;
- // Check if moving is done
- lastT = setTimeout(function() {
- lastX = 0;
- lastY = 0;
- }, 100);
- });
thanks