Web端 长按事件

直接贴代码

React Hook

 let _onPress = ''   
 onTouchStart={()=>{
    _onPress = setTimeout(()=>{
          setColor('#ccc')
   },2000)  //长按两秒改变颜色
 }} 
 onTouchEnd={()=>{
     setColor('#f5f5')
     clearTimeout(_onPress) //退出就清除定时器 　　
    }}

 

 

主要 要禁止默认长按复制文字

    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

 

遇到的问题

1.onTouchStart 和 onClick 冲突 

event.stopPropagation();阻止事件冒泡。
event.nativeEvent.stopImmediatePropagation(); 阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发。