https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
第一種寫法
import React,{Component} extends 'react'
export default class App from Component {
style={
'width':'200px',
'height':'200px',
'background':'#bada55'
}
handleTouchStart = (e)=>{
console.log('touchstart',e)
}
handleTouchEnd = (e)=>{
console.log('touchEnd',e)
}
handleTouchMove = (e)=>{
console.log('touchMove',e)
}
render(){
return(
<div style={this.style}
onTouchStart={this.handleTouchStart}
onTouchEnd={this.handleTouchEnd}
onTouchMove={this.handleTouchMove}
>
</div>
)
}
}
第二種寫法：原生JS
import React,{Component} extends 'react'
export default class App from Component {
style={
'width':'200px',
'height':'200px',
'background':'#bada55'
}
componentDidMount(){
let obj = document.getElementById('stage')
obj.addEventListener('touchstart',()=>{
console.log('touchstart')
obj.addEventListener('touchmove',()=>{
console.log('touchmove')
})
})
obj.addEventListener('touchend',()=>{
console.log('touchend')
})
}
handleTouchStart = (e)=>{
console.log('touchstart',e)
}
handleTouchEnd = (e)=>{
console.log('touchEnd',e)
}
handleTouchMove = (e)=>{
console.log('touchMove',e)
}
render(){
return(
<div style={this.style} id='stage'>
</div>
)
}
}
