触屏事件的两种写法

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(
        

              
        
    )
  }
}

第二种写法：原生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(
        

              
        
    )
  }
}