ReactJS Touch事件和iOS Safari

Question

I'm trying to build a react component that is a swipeable carousel. This is aimed at mobile devices so touch is a must. Here is my current setup:

1. A new react class with an object full of shared variables like so:

    var pmilla = React.createClass({ ppSlick: { touchStartVal: '', prevTouchVal: '', matrix: '', initSliderLeft: '', threshHold: 75, // number of pixels we need to travel before moving to next slide timestamp: '', slideTrack: '', // should be a jquery object viewPortWidth: '', offSets: '', disFromStart: '', isSwiping: false, currentSubPage: '', animType: '', transformType:'', transitionType:'', }, 

2. Touchstart handler:

    touchStartHandler: function(e){ this.ppSlick.touchStartVal = e.nativeEvent.touches[0]; this.ppSlick.prevTouchVal = e.nativeEvent.touches[0]; this.ppSlick.matrix = this.transMatrixToArray(this.ppSlick.slideTrack.css(this.ppSlick.transformType)); this.ppSlick.initSliderLeft = parseInt(this.ppSlick.matrix[4] , 10); }, 

3. Touchmove handler (and this is where the problem lies):

    touchMoveHandler: function(e){ var touch = e.nativeEvent.touches[0]; this.ppSlick.disFromStart = e.nativeEvent.touches[0].pageX - this.ppSlick.touchStartVal.pageX; var dis = Number(e.nativeEvent.touches[0].pageX - this.ppSlick.prevTouchVal.pageX); console.log('from pp obj', this.ppSlick.prevStartVal); console.log('inside touchandler', touch); 

So far so good. Everything is working nicely on desktop browsers as can be seen in this screenshot. (This is the output from the two console logs; the difference between the two pageX values is what I use to handle the transform)

So all of this works up until this point. Now see what happens on iOS Safari:

They're the same. I've tried using different touch events (nativeEvent vs Synthetic), I've tried placing the touchStartVal and prevTouchVal variables elsewhere and nothing seems to help. I'm out of ideas on this one. Let me know if I should provide more info on this.

Thanks!

Answer 1

It could be that it's iOS safari bug.

try with:

cursor: pointer;

more info:

http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

Answer 2

The solution is to not use some arbitrary object to shared variables but setState(). I'm not entirely sure what React is doing under the hood but it looks like the global object I had defined kept getting overwritten. Using the components state worked.

Oddly enough though, the previous implementation (object) worked on desktop browsers but broke on iOS Safari. Still not sure why.