범위 입력에 대한 \'Onchange\' 이벤트 처리에서 Firefox가 다르게 동작하는 이유는 무엇입니까?

입력 유형=Range Onchange 이벤트 동작 차이(Firefox)

문제 설명:

동안 를 사용하면 Firefox는 슬라이더가 새 위치에 놓일 때만 'onchange' 이벤트를 트리거하는 반면 Chrome과 같은 다른 브라우저는 드래그 작업 중에 이벤트를 시작합니다.

해결책:

'onchange' 이벤트의 브라우저 구현이 다르기 때문에 동작의 불일치가 발생합니다. HTML 사양에 따라 'onchange'는 입력 필드의 값이 확정된 경우(예: 마우스를 놓았을 때)에만 실행되어야 합니다.

이러한 차이를 해결하기 위해 다음 솔루션을 사용할 수 있습니다.

마우스 드래그와 키보드 입력 중 값 변경을 캡처하여 브라우저 전반에 걸쳐 일관된 동작을 제공하는 'oninput' 이벤트를 활용하세요.

그러나 'oninput'은 IE10에서 지원되지 않습니다. 따라서 포괄적인 호환성을 위해 'oninput' 및 'onchange' 이벤트 핸들러를 결합하는 것을 고려하십시오.

<code class="html"><span id="valBox"></span>
<input
  type="range"
  min="5"
  max="10"
  step="1"
  oninput="showVal(this.value)"
  onchange="showVal(this.value)"
/></code>

이 접근 방식을 통합하면 'onchange' 이벤트가 Firefox, Safari 및 Chrome에서 일관되게 트리거됩니다. IE10과의 호환성도 보장합니다.

위 내용은 범위 입력에 대한 \'Onchange\' 이벤트 처리에서 Firefox가 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!