ReactJS Touch事件和iOS Safari

Question

我正在尝试构建一个可滑动轮播的react组件。 这是针对移动设备的，因此触摸是必须的。 这是我当前的设置：

1. 一个新的React类，其对象充满共享变量，如下所示：

    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处理程序：

    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处理程序（这就是问题所在）：

    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); 

到现在为止还挺好。 在此屏幕截图中可以看到，一切在桌面浏览器上都运行良好。 （这是两个控制台日志的输出；两个pageX值之间的差异是我用来处理转换的内容）

因此，所有这些工作到现在为止。 现在看看在iOS Safari上会发生什么：

他们是一样的。 我尝试使用不同的触摸事件（nativeEvent与Synthetic），尝试将touchStartVal和prevTouchVal变量放置在其他位置，但似乎无济于事。 我对此一无所知。 让我知道是否需要提供更多信息。

谢谢！

Answer 1

可能是iOS的Safari浏览器错误。

尝试：

cursor: pointer;

更多信息：

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

Answer 2

解决方案是不要对共享变量使用某些任意对象，而要使用setState（）。 我不能完全确定React在做什么，但是看起来我定义的全局对象一直被覆盖。 使用组件状态有效。

奇怪的是，先前的实现（对象）在桌面浏览器上可以运行，但在iOS Safari上无法运行。 仍然不确定为什么。