javascript - Swipe Events in Mobile Safari Intermittently Breaking -

I am trying to set up swipe events for the site on which I am working. Basically, when a material swipes the container, its contents depend on the contents of the children's div elements will be changed on the actual div "use of content" which I'm engaging to swipe listeners, does not change.

To do some animation, I have the previous and next page containers that store the contents. I have removed the AJAX function, where I am populated for their simplicity.

It works while moving forward, but going backwards, I think the behavior of prevention and the whole page moves with my finger swipe. This problem is only in different ways and Going backwards.

// Dave Dunkin // http://rabblerule.blogspot.com/2009/08/detecting-swipe-in-webkit.html Function slightly modified code by addSwipeListener (L, Listener) {Var startX; Var dx; Different directions; Cancel function touch () {el.removeEventListener ('touchmove', onTouchMove); El.removeEventListener ('touchend', onTouchEnd); StartX = Null; StartY = Null; Direction = zero; } OnTouchMove function (e) {if (e.touches.length & gt; 1) {cancelTouch (); } And {dx = e.touches [0] .pageX - startX; Var dy = e.touches [0] .pageY - startY; If (direction == faucet) {direction = dx; } And if ((direction <0 & amp; amp;; & amp;;> 0) || (direction & gt; 0 & amp; amp; amp; amp; amp; amp; amp;;; dx & Lt; 0) || Mathematics.bs (d)> 400) {cancelTouch (); }}} Function onTouchEnd (e) {cancelTouch (); If (math.bs (dx)> 30) {listener ({target: L, direction: dx> 0? 'Right': 'left'}); DX = 0; }} Function onTouchStart (e) {e.preventDefault (); E.stopPropagation (); If (e.touches.length == 1) {startX = e.touches [0] .pageX; StartY = e.touches [0] .pageY; El.addEventListener ('touchmove', onTouchMove, incorrect); El.addEventListener ('touchend', onTouchEnd, false); }} El.addEventListener ('touchstart', onTouchStart, false); }

Add an audio listener

  addSwipeListener (document.getElementById ("contentwrapper"), function (e) {swipepagechange (e);}); Function swipepage change (e) {if (e.direction == "left") {moveforward (); } If (e.direction == "right") {movebackward (); }}  

Page Movement Events

  running the function () {$ ("# previouspagecontainer"). CSS ("z-index", "20"); $ ("# Newpagecontainer") CSS ("z-index", "40") .; $ ("#First Page"). Html ($ ("# circular") .HTML ()) $ ("# newpagecontainer") [0] .style.webkitAnimationName = 'flippageright'; $ ("#newpagecontainer") [0] .addEventListener ('WebKit AnimationAnd', function () {$ ("# current page container"). CSS ("z-index", "30"); $ ("# newpagecontainer" ) [0] Style.webkitAnimation name = ''; $ ("#s circular") .HTML ($ ("#Next Page") .HTML ());}); return false; } Functionbackback () {$ ("# first page container"). CSS ("z-index", "40"); $ ("# Currentpagecontainer") CSS ("z-index", "30") .; $ ("# Newpagecontainer") CSS ("z-index", "20") .; $ ("# First Page Container") [0]. Style.webkitAnimation name = 'flippection left'; $ ("# Previouspagecontainer") [0] .addEventListener ('WebKit AnimationIn', function () {$ ("# previouspagecontainer") [0] .style.webkitAnimationName = ''; $ ("# circular"). Html ($ ("#previouspage") .HTML ());}); return false; } 

The problem was being removed from the DOM by an unrelated element. I am not convinced that due to this it happened in breaking the events of swipe, but preventing this practice my problem was fixed.