첫 번째 변경 시 onchange 이벤트가 실행되지 않는 이유는 무엇입니까?

Question

시간을 내어 제 질문을 읽어주셔서 감사합니다.

"범위" input HTML(슬라이더)의 요소는 onchange - 이벤트의 내용은 다음과 같습니다. span 요소는 현재 값으로 업데이트됩니다. input 요소.

어쨌든, 첫 번째 변경 사항은 input 요소가 실행되지 않습니다 onchange 이벤트.'onclick' 이벤트가 사용되면 발생합니다.

다음은 코드입니다. HTML이 먼저입니다.

<div>

    <input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
    <span id="main_options_plug1_lengthPE_value"> … </span>

</div>

이제 자바스크립트는 다음과 같습니다.

function setOpenEndPELength(plug)
{
    if (plug == "plug1" || plug == "plug2")
    {
        var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
        var span = document.getElementById("main_options_" + plug + "_lengthPE_value");

        span.innerHTML = slider.value + " mm";
    }
}

나는 JSFiddle, 직접 시도해 볼 수 있습니다.

지금까지 stackoverflow에서 이 질문에 대한 답변을 찾지 못했습니다. 내가 찾은 질문은 다음과 같습니다. onchange 이벤트가 전혀 실행되지 않습니다.이 경우에는 첫 번째 변경 사항만 작동하지 않습니다.

누군가가 답을 알고 있기를 바랍니다.어떤 도움이라도 대단히 감사하겠습니다. 미리 감사드립니다.

Answer 1

질문을 올바르게 이해했다면 문제는 Firefox에서 onchange 커서가 슬라이더 버튼 위에 있을 때 마우스 버튼을 누르고 마우스를 움직이면 핸들러가 실행되지 않습니다.이동 후 마우스 버튼을 놓은 후에만 실행됩니다.

HTML5 CR이 change 이벤트:“요소에 활성화 동작이 정의되어 있지 않지만 명시적인 커밋 작업이 포함된 사용자 인터페이스를 사용하는 경우 사용자가 요소의 값이나 선택한 파일 목록에 대한 변경 사항을 커밋할 때마다 사용자 에이전트는 작업을 대기열에 넣어 실행해야 합니다. 입력 요소에서 변경이라는 이름을 버블링하는 간단한 이벤트입니다.”

다소 복잡한 공식이지만 명확한 예가 이어집니다.“커밋 작업이 포함된 사용자 인터페이스의 세 번째 예는 슬라이더를 사용하는 범위 컨트롤입니다.사용자가 컨트롤의 손잡이를 드래그하는 동안 입력 이벤트는 위치가 변경될 때마다 실행되는 반면, 변경 이벤트는 사용자가 손잡이에서 손을 떼고 특정 값을 적용할 때만 실행됩니다.”

결론은 이 경우에는 다음을 사용해야 한다는 것입니다. oninput 대신 속성 onchange.실제로, onmousemove 작동하지만 oninput 마우스를 사용하지 않는 입력 방법(예:음성으로 제어).

Answer 2

문서 준비에서 이벤트를 수동으로 트리거하려고 시도하면 처음으로 변경되지 않았습니다.

따라서 다음과 같이 코드를 추가하십시오.

$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)

Answer 3

약간의 속임수, OnChange가 처음으로 발사되지 않으면 다음을 추가하십시오.

onclick="console.log(1)"

클릭에 대한 다른 조치는 여전히 두 번째로 OnChange를 발사하지만 먼저 클릭 할 수 있습니다.