2015-03-13 81 views
2

我試圖觸發觸摸龍頭上的課程。使用onClick,它可以在桌面上正常工作,但使用onTap/onTouchStart/onTouchEnd時,事件不會被觸發。在渲染組件之前,我運行了React.initializeTouchEvents(true)。 clickhandler位於div元素上,我已設置cursor: pointer。我正在使用一個lonovo yoga 2 pro和一個iPad進行測試。另外我使用react router。 任何人都有一個想法,爲什麼它不工作?Reactjs touchevents無法正常工作

初始化:

React.initializeTouchEvents(true) 
Router.run(routes, Router.HistoryLocation, function (Handler) { 
    React.render(<Handler data={dummyData} />, document.getElementById('app')); 
}); 

組件:

var Transaction = React.createClass({ 
    getInitialState: function(){ 
    return ({showDetails: false}) 
    }, 
    toggleDetails: function(e){ 
    e.preventDefault() 
    this.setState({showDetails: !this.state.showDetails}) 
    }, 
    render: function(){ 
    var itemClasses = "pl-transaction-item pl-transaction-status-"+this.props.data.status 
    return (
     <li className={this.state.showDetails ? itemClasses + " pl-active" : itemClasses} > 
     // here is the touch event listener 
     <div className="pl-transaction-item-header" onTap={this.toggleDetails} onTouchEnd={this.toggleDetails}> 
      <img src={this.props.data.img} alt="" /><span>name: {this.props.data.name}</span><span>status: {this.props.data.status}</span><span>date: {this.props.data.date}</span> 
     </div> 
     <div className="pl-transaction-item-details"> 
      <img src={this.props.data.img} alt="" /> 
      <ul> 
      <li>name: {this.props.data.name}</li> 
      <li>status: {this.props.data.status}</li> 
      <li>date: {this.props.data.date}</li> 
      <li><button>OK</button></li> 
      </ul> 
     </div> 
     </li> 
    ) 
    } 
}) 

回答