Chrome 및 Edge에서 화살표 클릭시 입력 [type = number] 계속 증가
다음 문제가 발생합니다. 특정 jQuery 라이브러리가로드 된 후 숫자 입력 화살표를 클릭하면 포커스가 입력 요소 외부로 이동할 때까지 입력 값이 계속 증가 (또는 감소)됩니다.
input
이벤트를 요소에 바인딩하면 계속 트리거되는 것으로 나타났기 때문에 일부 코드 element.value
가 루프에 계속 설정 되어 있다고 믿게 되었습니다. 그러나 그것은 일어나지 않았습니다.
나는 호출에 문제가 아래로 추적 한 event.preventDefault()
A의 mouseup
이벤트를.
보다:
document.body.addEventListener('mouseup', (e) => {
e.preventDefault();
});
<input type="number">
왜 이런 일이 발생합니까?
답변
다음 문제는 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
하고 cancel
mouseup하면 숫자가 다음과 같이됩니다.
- 위쪽으로 밀면 계속 증가
- 아래쪽 화살표를 누르면 계속 감소
단, 놀라운 당신이 이벤트를 추가하는 코드를 작성했을 경우이 딱 들어 맞는 것입니다 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">
이 무한히 증가하는 입력의 원인을 검색하여 정보를 찾는 데 어려움을 겪었습니다.
원인을 직접 찾은 후에야 mousemove
() 의 기본값을 방지하는 것과 유사한 버그에 대해 발견했습니다.https://stackoverflow.com/a/37521764/6849064). 그러나 이것은 더 이상 발생하지 않는 것 같습니다.
Chrome (및 Edge) 버그 인 것 같습니다. 그러나 ~함에 따라https://stackoverflow.com/a/65253876/6849064실제로 그가 말한 방식에서 의미가있는 기본 동작입니다. 나는 어디에서나 문서화 된이 표준 행동을 찾지 못했습니다. 문제를 해결하는 한 가지 방법은 문서까지 이벤트 버블 링을 중지하는 것입니다.
document.querySelector('input').addEventListener('mouseup', (e) => {
e.stopPropagation();
});
그리고 다른 하나는 기본 동작을 방해하지 않습니다.