Chrome 및 Edge에서 화살표 클릭시 입력 [type = number] 계속 증가

Dec 11 2020

다음 문제가 발생합니다. 특정 jQuery 라이브러리가로드 된 후 숫자 입력 화살표를 클릭하면 포커스가 입력 요소 외부로 이동할 때까지 입력 값이 계속 증가 (또는 감소)됩니다.

input이벤트를 요소에 바인딩하면 계속 트리거되는 것으로 나타났기 때문에 일부 코드 element.value가 루프에 계속 설정 되어 있다고 믿게 되었습니다. 그러나 그것은 일어나지 않았습니다.

나는 호출에 문제가 아래로 추적 한 event.preventDefault()A의 mouseup이벤트를.

보다:

document.body.addEventListener('mouseup', (e) => {
    e.preventDefault();
});
<input type="number">

왜 이런 일이 발생합니까?

답변

1 Deadpool Dec 11 2020 at 22:12

다음 문제는 jQuery 와 관련이 없습니다 . 문제는 코드가 원하는 작업을 정확히 수행하고 있다는 것입니다. 코드 <input type="number" />에는 2 개의 이벤트가 있습니다. 하나는 'mousedown'이고 두 번째는 'mouseup'입니다.

다음 예를 고려하십시오. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2

위의 예에서도 마찬가지입니다.

당신이하고있는 것은 cancelling the 2nd part, ie mouseup당신이 mousedown하고 cancelmouseup하면 숫자가 다음과 같이됩니다.

  1. 위쪽으로 밀면 계속 증가
  2. 아래쪽 화살표를 누르면 계속 감소

단, 놀라운 당신이 이벤트를 추가하는 코드를 작성했을 경우이 딱 들어 맞는 것입니다 input보다는를 body하지만, 어쨌든 보인다 browser by default is increasing or decreasing number -- based on event-bubbling to body.

참고 : 이 문제는 아래에 복제되었지만 jQuery가 추가되지 않았습니다!

document.body.addEventListener('mouseup', (e) => {
  e.preventDefault();
});
<input type="number">

1 AnteNovokmet Dec 11 2020 at 18:39

이 무한히 증가하는 입력의 원인을 검색하여 정보를 찾는 데 어려움을 겪었습니다.

원인을 직접 찾은 후에야 mousemove() 의 기본값을 방지하는 것과 유사한 버그에 대해 발견했습니다.https://stackoverflow.com/a/37521764/6849064). 그러나 이것은 더 이상 발생하지 않는 것 같습니다.

Chrome (및 Edge) 버그 인 것 같습니다. 그러나 ~함에 따라https://stackoverflow.com/a/65253876/6849064실제로 그가 말한 방식에서 의미가있는 기본 동작입니다. 나는 어디에서나 문서화 된이 표준 행동을 찾지 못했습니다. 문제를 해결하는 한 가지 방법은 문서까지 이벤트 버블 링을 중지하는 것입니다.

document.querySelector('input').addEventListener('mouseup', (e) => {
    e.stopPropagation();
});

그리고 다른 하나는 기본 동작을 방해하지 않습니다.