NumberInput 마우스 휠 처리는 캡처 단계 이벤트 필터링을 무시합니다.

Question

매우 짧은 버전:

좀 막혔고 왜 이 코드가 숫자 편집기에서 숫자 변경을 위해 마우스 휠 이벤트를 가로채서 해석하지 못하게 하는지 잘 이해가 되지 않습니다. 가로채기 캡처 및 필터 이벤트가 작동하지 않는 이유 를 알고 싶습니다.

HTML 코드:

으아악

자바스크립트 코드:

으아악

지침: 입력한 숫자를 클릭하여 초점을 맞춘 다음 마우스 휠을 사용하세요. 자바스크립트 코드로 마우스 휠을 가로채는데 캡처 단계에서 주변

전파를 막아도 숫자는 계속 변합니다.

편의를 위해: https://jsfiddle.net/Ljku4gha/6/

내가 이루고 싶은 것은 무엇인가요?

기본 숫자 입력 필드(그리고 실제로는 슬라이더)를 사용하여 재사용 가능한 구성 요소를 작성하고 싶습니다. 사용자가 이러한 입력에서 스크롤 휠을 사용하여 숫자를 변경하는 것을 원하지 않습니다. 대신, 마우스휠은 스크롤 목적으로 주변의 일부 (알 수 없는!) div(아마도)에서 이벤트를 트리거해야 합니다. 그래서 숫자 편집기(및 슬라이더)가 어떤 방식으로든 마우스 휠 이벤트를 처리하지 못하도록 하고 싶습니다.

상위 버전: 내 분석/가설

완전히 설명할 수는 없지만, 무슨 일이 일어나고 있는지에 대한 두 가지 가설이 있습니다.

내 첫 번째 생각은 이것이 브라우저가 사용자 이벤트(제 생각에는 "사용자 에이전트"라는 키워드)를 처리하는 방식에 따른 인공물이라는 것입니다. 그러나 브라우저가 사용자 이벤트를 처리하는 방법에 대해 읽을 수 있는 곳을 누군가 지적해 준다면 매우 환영할 것입니다. 그때까지 브라우저의 이벤트 처리에 대한 나의 이해는 다음과 같습니다.

사용자가 마우스 휠을 스크롤합니다
이제 JavaScript가 이벤트를 처리할 차례입니다.
• JavaScript는 캡처/버블 작업을 수행합니다
  이벤트 핸들러는 이벤트를 처리된 것으로 표시할 수 있습니다(preventDefault())
외부 JavaScript: JavaScript의 이벤트 핸들러가 PreventDefault()를 호출하지 않으면 "사용자 에이전트"가 차례대로 이벤트를 처리합니다. 이에 대한 세부적인 제어가 없기 때문에 이 단계는 완전히 중지하거나 계속하는 것만 가능합니다. 숫자 편집의 "기본 처리"는 숫자 값을 변경하는 것이므로 숫자가 변경되고 스크롤 이벤트가 발생하지 않습니다.

결과:

*sad me*

그런데 이 이론이 가장 타당하다고 생각하는데, 어쩌면 완전히 잘못된 것일 수도 있겠죠? !

지루한 대체 설명: 내가 잘못된 이벤트를 듣고 있는 걸까요?

뭔가 빠졌을 수도 있고 휠 이벤트가 Default()를 차단할 수 있는 다른 이벤트로 변환되었을 수도 있나요? 나는 그것에 대한 어떤 정보도 찾을 수 없지만 그것은 나에게 완벽하게 이해됩니다... 어쩌면? 그것은 심지어 "릴"도 아닙니다. 그것이 제가 말할 수 있는 전부입니다.

---

저는 주로 제가 하고 있는 일이 왜 작동하지 않는지 이해하는 데 도움이 되는 몇 가지 지침을 얻고 싶습니다. 솔루션도 환영합니다!

Answer 1

숫자 입력의 기본 동작을 방지하려면 event.preventDefault()를 사용하세요.

2가지 개선 사항이 있습니다:

• 입력에 포커스가 있을 때만(휠이 값을 변경할 때) 스크롤 휠을 방지합니다. 이렇게 하면 입력에 초점이 맞지 않을 때 스크롤 휠이 정상적으로 작동합니다
• 입력에 초점이 맞춰지면 기본값을 방지하고 다음 휠 이벤트 스크롤이 다시 작동하도록 입력을 흐리게 합니다(이 조정을 원하는지 결정해야 합니다).

캡처로는 이 문제를 해결할 수 없습니다. 왜냐하면

안타깝게도 캡처하면 이벤트가 입력까지 버블링되기 전에 기본 동작이 발생합니다

그러므로 stopPropagation() 포획 단계에서는 도움이 되지 않습니다.

으아악 으아악 으아악