스니핑하지 않고 데스크톱 및 모바일에서의 touchstart 및 mousedown에 대한 응답

Question

그래서 문제가 있습니다. 사용자가 마우스 버튼 (바탕 화면)을 누르거나 div (모바일)를 터치하여 응답하고 싶습니다. 나는 상록수 브라우저와 호환되도록 노력하고 있습니다. 이것은 지금까지 시도한 것입니다 :

• mouseDown 이벤트에만 수신 대기합니다. 데스크톱에서는 작동하지만 사용자가 드래그하면 모바일에서 작동하지 않습니다. 나는 사용자가 화면을 터치하자마자 핸들러를 호출하기를 원한다. 프로세스에서 손가락을 움직여도 상관 없다.
• 수신 전용 touchStart 이벤트. 이 기능은 터치 이벤트를 지원하지 않는 Edge 및 Safari 데스크톱을 제외하고 모바일 및 데스크톱에서 작동합니다.
• 모두를 청취하면 preventDefault입니다. 이로 인해 Chrome 모바일에서 이중 핸들러 호출이 발생합니다. 터치 이벤트는 모바일 Chrome에서 중단되지 않는 스크롤을 허용하기 위해 수동적 인 것으로 보이므로 preventDefualt은 아무런 영향을 미치지 않습니다. 콘솔에 "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080"이라는 경고 메시지가 나타나면 preventDefault이 무시되고 내 이벤트가 두 번 호출됩니다.

는 분명히 이것은 터치 이벤트를 스니핑에 의해 해결 될 수 있지만, 그물 device-agnostic 및 it's dangerous to detect touch events before the user interacted 것을 할 사람이이 방법에 대한 독선적 호언 장담이 가득합니다.

그래서 질문 : 터치 이벤트에 대해 스니핑하지 않고 할 일을하는 방법이 있습니까?

function handler(e) { 
    console.log('handler called') 
    e.preventDefault() 
} 

export default function MyElement() { 
    return (
     <div 
      onMouseDown={handler} 
      onTouchStart={handler} 
     > 
     Hello 
     </div> 
    ) 
} 

Answer 1

그것은 it's not yet possible in React을 밝혀 내 샘플 아래

코드를 반응한다. 한 가지 해결 방법은 처음으로 touchStart받은 플래그를 설정합니다. 첫 번째 touchStart 드래그의 경우 손실 될 수 있다는 경고와

touchHandler =() => { 
    this.useTouch = true 
    this.realHandler() 
} 

mouseHandler =() => { 
    if (this.useTouch) return 
    this.realHandler() 
} 

.

실망 스럽습니다.