我可以在Cordova中运行Fastclick ReactJS吗

Question

fastclick是否可以与ReactJS的事件系统一起使用？通过Cordova在iOS或Android上运行时似乎不需要花时间。如果不是，是否还有另一种获得相同结果的方法。我的应用没有两次点击功能，因此，如果可能的话，我希望全面消除这种延迟。

Answer 1

我在Webpack项目中让FastClick与React一起工作。有些事情似乎有些挑剔，但大多数情况下都是有效的。（更新：只有一个模拟隐藏复选框的点击的拨动开关才是挑剔的-无论React如何，这都是一个问题）。这是我打开它的方式：npm install -S fastclick在main.jsx：import FastClick from 'fastclick';window.addEventListener('load', () => {  FastClick.attach(document.body);});因此，即使您不使用Webpack或Browserify，我猜只要您可以运行load事件监听器，就可以了。

Answer 2

我们最近创建了一个与fastclick相似的React组件，除了它更简单并且需要手动回调。它很短，所以我将其发布在这里：React.initializeTouchEvents(true)var TouchClick = React.createClass({&nbsp; defaults: {&nbsp; &nbsp; touched: false,&nbsp; &nbsp; touchdown: false,&nbsp; &nbsp; coords: { x:0, y:0 },&nbsp; &nbsp; evObj: {}&nbsp; },&nbsp; getInitialState: function() {&nbsp; &nbsp; return this.defaults&nbsp; },&nbsp; handler: function() {&nbsp; &nbsp; typeof this.props.handler == 'function' && this.props.handler.apply(this, arguments)&nbsp; },&nbsp; getCoords: function(e) {&nbsp; &nbsp; if ( e.touches && e.touches.length ) {&nbsp; &nbsp; &nbsp; var touch = e.touches[0]&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; x: touch.pageX,&nbsp; &nbsp; &nbsp; &nbsp; y: touch.pageY&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; onTouchStart: function(e) {&nbsp; &nbsp; this.setState({&nbsp;&nbsp; &nbsp; &nbsp; touched: true,&nbsp;&nbsp; &nbsp; &nbsp; touchdown: true,&nbsp; &nbsp; &nbsp; coords: this.getCoords(e),&nbsp; &nbsp; &nbsp; evObj: e&nbsp; &nbsp; })&nbsp; },&nbsp; onTouchMove: function(e) {&nbsp; &nbsp; var coords = this.getCoords(e)&nbsp; &nbsp; var distance = Math.max(&nbsp;&nbsp; &nbsp; &nbsp; Math.abs(this.state.coords.x - coords.x),&nbsp;&nbsp; &nbsp; &nbsp; Math.abs(this.state.coords.y - coords.y)&nbsp;&nbsp; &nbsp; )&nbsp; &nbsp; if ( distance > 6 )&nbsp; &nbsp; &nbsp; this.setState({ touchdown: false })&nbsp; },&nbsp; onTouchEnd: function() {&nbsp; &nbsp; if(this.state.touchdown)&nbsp; &nbsp; &nbsp; this.handler.call(this, this.state.evObj)&nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; if ( this.isMounted() )&nbsp; &nbsp; &nbsp; &nbsp; this.setState(this.defaults)&nbsp; &nbsp; }.bind(this), 4)&nbsp; },&nbsp; onClick: function() {&nbsp; &nbsp; if ( this.state.touched )&nbsp; &nbsp; &nbsp; return false&nbsp; &nbsp; this.setState(this.defaults)&nbsp; &nbsp; this.handler.apply(this, arguments)&nbsp; },&nbsp; render: function() {&nbsp; &nbsp; var classNames = ['touchclick']&nbsp; &nbsp; this.props.className && classNames.push(this.props.className)&nbsp; &nbsp; this.state.touchdown && classNames.push('touchdown')&nbsp; &nbsp; return React.DOM[this.props.nodeName || 'button']({&nbsp; &nbsp; &nbsp; className: classNames.join(' '),&nbsp; &nbsp; &nbsp; onTouchStart: this.onTouchStart,&nbsp; &nbsp; &nbsp; onTouchMove: this.onTouchMove,&nbsp; &nbsp; &nbsp; onTouchEnd: this.onTouchEnd,&nbsp; &nbsp; &nbsp; onClick: this.onClick&nbsp; &nbsp; }, this.props.children)&nbsp; }})只需传递handlerprop作为回调并将内容包装在其中即可。这也适用于同时具有触摸和点击事件的系统（例如更新的Windows 8笔记本电脑）。例：&nbsp;<TouchClick handler={this.clickHandler} className='app'>&nbsp; &nbsp;<h1>Hello world</h1>&nbsp;</TouchClick>