입력 유형=범위를 변경하는 이벤트가 끌 때 Firefox에서 트리거되지 않음
★★★★★★★★★★와 놀 때<input type="range">Firefox는 슬라이더를 끌 때 Chrome 등의 변경 이벤트를 트리거하는 새로운 위치에 슬라이더를 놓는 경우에만 변경 이벤트를 트리거합니다.
Firefox에서 끌면 어떻게 해야 하나요?
function showVal(newVal){
document.getElementById("valBox").innerHTML=newVal;
}<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" onchange="showVal(this.value)">크롬 사파리onchange사용자가 마우스를 놓을 때만 트리거해야 합니다.업데이트를 , 「」를 합니다.oninputFirefox, Safari 및 Chrome의 실시간 업데이트를 마우스와 키보드에서 모두 캡처하는 이벤트입니다.
★★★★★★★★★★★★★★.oninput되지 않으므로 하는 것이 .
<span id="valBox"></span>
<input
type="range"
min="5"
max="10"
step="1"
oninput="showVal(this.value)"
onchange="showVal(this.value)"
/>
자세한 내용은 이 Bugzilla 스레드를 참조하십시오.
요약:.
여기서는 no-jQuery 크로스 브라우저 데스크톱 및 모바일 기능을 제공하여 범위/슬라이더 상호 작용에 일관되게 응답할 수 있습니다.이것은 현재 브라우저에서는 불가능한 것입니다.으로 모든 IE11을 합니다.on("change"... 중 on("change"... ★★★★★★★★★★★★★★★★★」on("input"...은요.★★★★★★★★★★★★...
function onRangeChange(r,f) {
var n,c,m;
r.addEventListener("input",function(e){n=1;c=e.target.value;if(c!=m)f(e);m=c;});
r.addEventListener("change",function(e){if(!n)f(e);});
}
서...어디에r 및 범위 입력 요소입니다.f당신의 청취자입니다.수신기는 범위/슬라이더 값을 변경하는 모든 상호 작용 후에 호출되지만 현재 슬라이더 위치에서 마우스 또는 터치 상호 작용 또는 슬라이더의 한쪽 끝에서 이동할 때처럼 해당 값을 변경하지 않는 상호 작용 후에는 호출되지 않습니다.
문제:
2016년 6월 초 현재 브라우저마다 범위/슬라이더 사용에 대한 대응 방식이 다릅니다.5가지 시나리오가 관련되어 있습니다.
- 현재 슬라이더 위치에서 초기 마우스 다운(또는 터치 스타트)
- 새로운 슬라이더 위치에서 마우스를 처음 아래로(또는 터치 스타트)
- 슬라이더를 따라 1 또는 2 후에 마우스(또는 터치)를 계속 움직인다.
- 슬라이더 양쪽 끝을 지나 1 또는 2 이후의 마우스(또는 터치) 이동
- 최종 마우스 업(또는 터치 엔드)
다음 표는 위의 시나리오 중 어떤 시나리오에 대응하고 있는지에 대해 적어도3개의 다른 데스크톱브라우저의 동작을 나타내고 있습니다.
솔루션:
onRangeChange함수는 범위/평균 상호 작용에 대해 일관되고 예측 가능한 교차 교차 교차 응답을 제공합니다.다음 표에 따라 모든 브라우저가 강제로 동작합니다.
IE11에서는, 이, 수 있게 , IE11에서는, IE11이 할 수 있게 됩니다."change"와 '이벤트'"input"이벤트는 어차피 발화하지 않기 때문에 무관합니다.외의 에서는, 「」는"change"이벤트는 효과적으로 무음화됩니다(추가 이벤트 및 경우에 따라서는 비동기 이벤트가 발생하는 것을 방지하기 위해). 「」는,"input"변경되었을 합니다.event는 범위/주파수 값이 변경되었을 때 입니다.일부 브라우저(예: Firefox)에서는 위 목록의 시나리오 1, 4, 5에서 청취자가 효과적으로 무음 상태가 되기 때문에 이 문제가 발생합니다.
1, 4 중 해야 할 ('1, 4, 5')를 해 볼 수 있습니다."mousedown"/"touchstart","mousemove"/"touchmove" "/"/""mouseup"/"touchend"은 이를 벗어납니다.)이러한 솔루션은 이 답변의 범위를 벗어납니다.)
모바일 브라우저 기능:
이 코드를 데스크톱브라우저에서 테스트하고 있습니다만, 모바일브라우저에서는 테스트하고 있지 않습니다.그러나 이 페이지의 다른 답변에서는 MBourne의 솔루션이 "...찾을 수 있는 모든 브라우저(Win 데스크톱: IE, Chrome, Opera, FF, iOS Safari)"라고 표시되어 있습니다.(감사합니다.)
사용방법:
하려면 , 「」를 포함합니다.onRangeChange위의 요약(검증/최소화) 또는 아래 데모 코드 조각(기능적으로는 동일하지만 자기 설명)에서 기능을 수행합니다.뭇매를 맞다
onRangeChange(myRangeInputElmt, myListener);
서 ''는myRangeInputElmt이 원하는 " " " " 입니다.<input type="range"> 및 DOM 요소myListener는, 「수신자/수신자 기능」으로, 「/「」의 기능입니다."change"- 이벤트 - 같은 이벤트. - 같은 이벤트.
가 필요없거나 를 할 수 .event파라미터, 즉 필요에 따라 다음 중 하나가 동작합니다.
var myListener = function() {...
또는
var myListener = function(evt) {...
)input 소(예: 사용)removeEventListener
데모 설명:
는 " " " 입니다.onRangeChange는 유니버설 솔루션을 제공합니다.코드의 나머지 부분은 단순히 그 용도를 보여주는 예에 불과합니다." "로 시작하는 의 변수my...는 범용 솔루션과는 무관하며 데모를 위해서만 존재합니다.
데모에서는 범위됩니다."change","input" 커스텀 ★★★★★"onRangeChange"A, B, C를 사용하다다른 브라우저에서 이 스니펫을 실행하는 경우 범위/슬라이더와 대화할 때 다음 사항에 주의하십시오.
- IE11에서는 위의 시나리오2와 3에서는 A행과 C행의 값이 모두 변경되지만 B행은 변경되지 않습니다.
- Chrome 및 Safari에서는 시나리오 2와 3에서 행 B와 C의 값이 모두 변경되지만 A의 행은 시나리오 5에서만 변경됩니다.
- 파이어폭스에서 행 A의 값은 시나리오 5, 행 B는 시나리오 5 모두에 대해 변경되며 행 C는 시나리오 2와 3에 대해서만 변경됩니다.
- 위의 모든 브라우저에서 C행(제안된 솔루션)의 변경은 시나리오2와 3에서만 동일합니다.
데모 코드:
// main function for emulating IE11's "change" event:
function onRangeChange(rangeInputElmt, listener) {
var inputEvtHasNeverFired = true;
var rangeValue = {current: undefined, mostRecent: undefined};
rangeInputElmt.addEventListener("input", function(evt) {
inputEvtHasNeverFired = false;
rangeValue.current = evt.target.value;
if (rangeValue.current !== rangeValue.mostRecent) {
listener(evt);
}
rangeValue.mostRecent = rangeValue.current;
});
rangeInputElmt.addEventListener("change", function(evt) {
if (inputEvtHasNeverFired) {
listener(evt);
}
});
}
// example usage:
var myRangeInputElmt = document.querySelector("input" );
var myRangeValPar = document.querySelector("#rangeValPar" );
var myNumChgEvtsCell = document.querySelector("#numChgEvtsCell");
var myNumInpEvtsCell = document.querySelector("#numInpEvtsCell");
var myNumCusEvtsCell = document.querySelector("#numCusEvtsCell");
var myNumEvts = {input: 0, change: 0, custom: 0};
var myUpdate = function() {
myNumChgEvtsCell.innerHTML = myNumEvts["change"];
myNumInpEvtsCell.innerHTML = myNumEvts["input" ];
myNumCusEvtsCell.innerHTML = myNumEvts["custom"];
};
["input", "change"].forEach(function(myEvtType) {
myRangeInputElmt.addEventListener(myEvtType, function() {
myNumEvts[myEvtType] += 1;
myUpdate();
});
});
var myListener = function(myEvt) {
myNumEvts["custom"] += 1;
myRangeValPar.innerHTML = "range value: " + myEvt.target.value;
myUpdate();
};
onRangeChange(myRangeInputElmt, myListener);table {
border-collapse: collapse;
}
th, td {
text-align: left;
border: solid black 1px;
padding: 5px 15px;
}<input type="range"/>
<p id="rangeValPar">range value: 50</p>
<table>
<tr><th>row</th><th>event type </th><th>number of events </th><tr>
<tr><td>A</td><td>standard "change" events </td><td id="numChgEvtsCell">0</td></tr>
<tr><td>B</td><td>standard "input" events </td><td id="numInpEvtsCell">0</td></tr>
<tr><td>C</td><td>new custom "onRangeChange" events</td><td id="numCusEvtsCell">0</td></tr>
</table>크레딧:
여기에서의 실장은 대부분 제 자신의 것이지만, 그것은 Mbourne의 대답에서 영감을 받았습니다.다른 답변에서는 "입력" 이벤트와 "변경" 이벤트가 병합될 수 있으며, 그 결과 생성된 코드가 데스크톱 및 모바일 브라우저 모두에서 작동할 것이라고 제안했습니다.단, 이 답변의 코드는 숨겨진 "추가" 이벤트를 발생시키는 결과를 초래하며, 그 자체로도 문제가 있으며, 발생되는 이벤트는 브라우저마다 다르므로 더 큰 문제가 됩니다.여기에 구현하면 이러한 문제가 해결됩니다.
키워드:
JavaScript 입력 유형 범위 슬라이더 이벤트 입력 브라우저 호환성 변경 브라우저 데스크톱 모바일 no-jQuery
별로 도움이 되지 않는 답변의 코멘트가 아니라 자신의 답변으로 할 만하기 때문에 이 글을 올립니다.이 방법은 모든 js를 HTML과 다른 파일에 저장할 수 있기 때문에 허용되는 답변보다 훨씬 낫다고 생각합니다.
Jamrelian이 인정된 답변 아래 코멘트에서 제공한 답변입니다.
$("#myelement").on("input change", function() {
//do something
});
Jaime 님의 코멘트를 알아두세요.
이 솔루션에서는 Chrome에서는 핸들러에 대한 콜이2개(1이벤트당1개)가 수신되기 때문에, 이러한 콜을 회피할 필요가 있습니다.
이와 같이 마우스 이동을 중지하면 이벤트가 발생하며 마우스 버튼을 놓으면 다시 이벤트가 발생합니다.
갱신하다
change 및 "" " " " " "input2번입니다.을 사용법
에서 input 경우, 문제가 낮습니다.change이벤트 발화
input범위 입력 슬라이더를 끌면 빠르게 실행됩니다. 더 하는 것에 걱정하는 은 물 한하는 것과 . 물 한이 바다인 요.input벤트입입니니다
★★★★★★★★★★★★★★★★★★★를 포함한 이유change이벤트는 브라우저 호환성(주로 IE와의 호환성)을 위한 것입니다.
업데이트: 이 답변은 마우스 이벤트를 사용하여 데스크톱 브라우저(모바일 아님)에서 범위/슬라이더 상호작용을 사용하는 방법의 예로서 여기에 남깁니다.다만, 이 문제에 대해서 크로스 브라우저의 데스크탑과 모바일 솔루션을 제공하기 위해서, 다른 어프로치를 사용하고 있는 이 페이지의 다른 부분에서도, 완전히 다른 답변을 작성했습니다.
원답:
요약: JavaScript no-jQuery) 입력값을 읽지 않고 읽을 수 있습니다.Jo-jQuery)"를 사용하지 않고 수 .on('input'... "/"/"on('change'...브라우저 간에 일관성이 없습니다.
오늘(2016년 2월 말)에도 브라우저의 불일치가 남아 있기 때문에 새로운 회피책을 제시합니다.
등)을 하는 경우: 범위 입력(슬라이더)을 사용합니다.on('input'... 및 Firefox, 및 및 Safari에서 "Mac" "Windows Firefox, Chrome" "Opera" "Mac Safari"는 "Mac" "Windows Firefox, "Opera" "Mac Safari"입니다.on('change'...는 마우스 조작 시 범위 값만 보고합니다. Explorer에서는 Internet Explorer(v11)의on('input'...하지 않습니다.또, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」on('change'...는 계속 갱신됩니다.
여기에서는 마우스 다운, 마우스 이동 및 (가능성이 있는) 마우스 업 이벤트를 사용하여 바닐라 JavaScript(jQuery 없음)를 사용하여 모든 브라우저에서 동일한 연속 범위 값 보고를 얻는 2가지 전략을 보고합니다.
전략 1: 단시간이지만 효율은 낮다
보다 효율적인 코드보다 짧은 코드를 선호한다면 마우스 다운과 마우스 이동을 사용하지만 마우스 업은 사용하지 않는 첫 번째 솔루션을 사용할 수 있습니다.이렇게 하면 슬라이더가 필요에 따라 읽히지만 사용자가 클릭하지 않았으므로 슬라이더를 끌지 않아도 마우스 오버 이벤트 동안 불필요한 부팅이 계속됩니다.으로 '와 ' move'중에 모두 , 'mouse move'는 'mouse down' 이후와 'mouse move' 이벤트 중에 각각 'mouse move'를 사용하여 시킵니다.requestAnimationFrame.
var rng = document.querySelector("input");
read("mousedown");
read("mousemove");
read("keydown"); // include this to also allow keyboard control
function read(evtType) {
rng.addEventListener(evtType, function() {
window.requestAnimationFrame(function () {
document.querySelector("div").innerHTML = rng.value;
rng.setAttribute("aria-valuenow", rng.value); // include for accessibility
});
});
}<div>50</div><input type="range"/>전략 2: 장기간에 걸쳐 효율화
보다 효율적인 코드가 필요하고 긴 코드 길이를 견딜 수 있는 경우 마우스 다운, 마우스 이동 및 마우스 업을 사용하는 다음 솔루션을 사용할 수 있습니다.또한 필요에 따라 슬라이더를 읽지만 마우스 버튼을 놓으면 바로 슬라이더 읽기가 중지됩니다.본질적인 차이점은 는 'mouse move' 후에만 'mouse move'를 듣기 시작하고, 'mouse up' 후에 'mouse move'를 듣기 시작한다는 것입니다.
var rng = document.querySelector("input");
var listener = function() {
window.requestAnimationFrame(function() {
document.querySelector("div").innerHTML = rng.value;
});
};
rng.addEventListener("mousedown", function() {
listener();
rng.addEventListener("mousemove", listener);
});
rng.addEventListener("mouseup", function() {
rng.removeEventListener("mousemove", listener);
});
// include the following line to maintain accessibility
// by allowing the listener to also be fired for
// appropriate keyboard events
rng.addEventListener("keydown", listener);<div>50</div><input type="range"/>데모: 상기 회피책의 필요성과 구현에 대한 자세한 설명
다음 코드는 이 전략의 다양한 측면을 보다 완벽하게 보여줍니다.데모에는 다음과 같은 설명이 포함되어 있습니다.
var select, inp, listen, unlisten, anim, show, onInp, onChg, onDn1, onDn2, onMv1, onMv2, onUp, onMvCombo1, onDnCombo1, onUpCombo2, onMvCombo2, onDnCombo2;
select = function(selctr) { return document.querySelector(selctr); };
inp = select("input");
listen = function(evtTyp, cb) { return inp. addEventListener(evtTyp, cb); };
unlisten = function(evtTyp, cb) { return inp.removeEventListener(evtTyp, cb); };
anim = function(cb) { return window.requestAnimationFrame(cb); };
show = function(id) {
return function() {
select("#" + id + " td~td~td" ).innerHTML = inp.value;
select("#" + id + " td~td~td~td").innerHTML = (Math.random() * 1e20).toString(36); // random text
};
};
onInp = show("inp" ) ;
onChg = show("chg" ) ;
onDn1 = show("mdn1") ;
onDn2 = function() {anim(show("mdn2")); };
onMv1 = show("mmv1") ;
onMv2 = function() {anim(show("mmv2")); };
onUp = show("mup" ) ;
onMvCombo1 = function() {anim(show("cmb1")); };
onDnCombo1 = function() {anim(show("cmb1")); listen("mousemove", onMvCombo1);};
onUpCombo2 = function() { unlisten("mousemove", onMvCombo2);};
onMvCombo2 = function() {anim(show("cmb2")); };
onDnCombo2 = function() {anim(show("cmb2")); listen("mousemove", onMvCombo2);};
listen("input" , onInp );
listen("change" , onChg );
listen("mousedown", onDn1 );
listen("mousedown", onDn2 );
listen("mousemove", onMv1 );
listen("mousemove", onMv2 );
listen("mouseup" , onUp );
listen("mousedown", onDnCombo1);
listen("mousedown", onDnCombo2);
listen("mouseup" , onUpCombo2);table {border-collapse: collapse; font: 10pt Courier;}
th, td {border: solid black 1px; padding: 0 0.5em;}
input {margin: 2em;}
li {padding-bottom: 1em;}<p>Click on 'Full page' to see the demonstration properly.</p>
<table>
<tr><th></th><th>event</th><th>range value</th><th>random update indicator</th></tr>
<tr id="inp" ><td>A</td><td>input </td><td>100</td><td>-</td></tr>
<tr id="chg" ><td>B</td><td>change </td><td>100</td><td>-</td></tr>
<tr id="mdn1"><td>C</td><td>mousedown </td><td>100</td><td>-</td></tr>
<tr id="mdn2"><td>D</td><td>mousedown using requestAnimationFrame</td><td>100</td><td>-</td></tr>
<tr id="mmv1"><td>E</td><td>mousemove </td><td>100</td><td>-</td></tr>
<tr id="mmv2"><td>F</td><td>mousemove using requestAnimationFrame</td><td>100</td><td>-</td></tr>
<tr id="mup" ><td>G</td><td>mouseup </td><td>100</td><td>-</td></tr>
<tr id="cmb1"><td>H</td><td>mousedown/move combo </td><td>100</td><td>-</td></tr>
<tr id="cmb2"><td>I</td><td>mousedown/move/up combo </td><td>100</td><td>-</td></tr>
</table>
<input type="range" min="100" max="999" value="100"/>
<ol>
<li>The 'range value' column shows the value of the 'value' attribute of the range-type input, i.e. the slider. The 'random update indicator' column shows random text as an indicator of whether events are being actively fired and handled.</li>
<li>To see browser differences between input and change event implementations, use the slider in different browsers and compare A and B.</li>
<li>To see the importance of 'requestAnimationFrame' on 'mousedown', click a new location on the slider and compare C (incorrect) and D (correct).</li>
<li>To see the importance of 'requestAnimationFrame' on 'mousemove', click and drag but do not release the slider, and compare E (often 1 pixel behind) and F (correct).</li>
<li>To see why an initial mousedown is required (i.e. to see why mousemove alone is insufficient), click and hold but do not drag the slider and compare E (incorrect), F (incorrect) and H (correct).</li>
<li>To see how the mouse event combinations can provide a work-around for continuous update of a range-type input, use the slider in any manner and note whichever of A or B continuously updates the range value in your current browser. Then, while still using the slider, note that H and I provide the same continuously updated range value readings as A or B.</li>
<li>To see how the mouseup event reduces unnecessary calculations in the work-around, use the slider in any manner and compare H and I. They both provide correct range value readings. However, then ensure the mouse is released (i.e. not clicked) and move it over the slider without clicking and notice the ongoing updates in the third table column for H but not I.</li>
</ol>Andrew Willem의 솔루션은 모바일 디바이스와 호환되지 않습니다.
다음은 Edge, IE, Opera, FF, Chrome, iOS Safari 및 모바일 관련 제품(테스트 가능)에서 작동하는 두 번째 솔루션의 수정 내용입니다.
업데이트 1: 필수가 아니기 때문에 "request Animation Frame" 부분이 삭제되었습니다.
var listener = function() {
// do whatever
};
slider1.addEventListener("input", function() {
listener();
slider1.addEventListener("change", listener);
});
slider1.addEventListener("change", function() {
listener();
slider1.removeEventListener("input", listener);
});
업데이트 2: Andrew의 2016년 6월 2일 갱신된 답변:
감사합니다, Andrew - 제가 찾을 수 있는 모든 브라우저(Win 데스크톱: IE, Chrome, Opera, FF, Android Chrome, Opera 및 FF, iOS Safari)에서 작동하는 것 같습니다.
업데이트 3: if(슬라이더 내 온입력) 솔루션
다음은 위의 모든 브라우저에서 작동하는 것으로 보입니다(원래 소스를 찾을 수 없습니다).이것을 사용하고 있었습니다만, IE에 장해가 나서, 다른 것을 찾아 여기에 오게 되었습니다.
if ("oninput" in slider1) {
slider1.addEventListener("input", function () {
// do whatever;
}, false);
}
그러나 귀사의 솔루션을 확인하기 전에 IE에서 다시 동작하고 있는 것을 알게 되었습니다.아마도 다른 충돌이 있었을 것입니다.
적절한 크로스 브라우저 동작과 알기 쉬운 코드를 위해서는 onchange Atribut을 다음 폼과 조합하여 사용하는 것이 가장 좋습니다.
function showVal(){
valBox.innerHTML = inVal.value;
}<form onchange="showVal()">
<input type="range" min="5" max="10" step="1" id="inVal">
</form>
<span id="valBox"></span>on input을 사용하는 경우와 마찬가지로 값은 직접 변경됩니다.
function showVal(){
valBox.innerHTML = inVal.value;
}<form oninput="showVal()">
<input type="range" min="5" max="10" step="1" id="inVal">
</form>
<span id="valBox"></span>저와 같이 범위 타입의 입력이 어떤 모바일 브라우저에서도 동작하지 않는 이유를 알 수 없는 경우에 대한 답변으로 글을 올립니다.노트북에서 모바일 앱을 개발하고 응답 모드를 사용하여 터치를 에뮬레이트하면 터치 시뮬레이터를 활성화해도 범위가 움직이지 않습니다.비활성화하면 움직이기 시작합니다.나는 이틀 동안 그 주제에 대해 찾을 수 있는 모든 코드를 시도해 보았지만 아무리 노력해도 작동되지 않았다.이 투고에서는, 유효한 솔루션을 제공하고 있습니다.
모바일 브라우저 및 하이브리드 앱
모바일 브라우저는 iOS용 Webkit 및 Android용 WebView라는 구성 요소를 사용하여 실행됩니다.WebView/WebKit를 사용하면 웹 브라우저를 액티비티 레이아웃에 삽입할 수 있습니다.웹 브라우저에는 창틀, 메뉴, 툴바, 스크롤바 등의 크롬 또는 파이어폭스(브라우저) 컨트롤이 없습니다.즉, 모바일 브라우저에는 보통 일반 브라우저에서 볼 수 있는 웹 컴포넌트가 많이 없습니다.이것은 범위 타입의 입력에 관한 문제입니다.사용자의 브라우저가 범위 유형을 지원하지 않으면 폴백하여 텍스트 입력으로 처리합니다.따라서 터치 시뮬레이터가 활성화되어 있을 때 범위를 이동할 수 없습니다.
jQuery 슬라이더
jQuery는 터치 시뮬레이션에서 작동하는 슬라이더를 제공하지만, 흔들림이 심하고 매끄럽지 않습니다.저는 만족하지 못했고, 당신도 만족하지 못할 것입니다만, jqueryUi와 조합하면 보다 원활하게 동작할 수 있습니다.
최적의 솔루션: Range Touch
노트북으로 하이브리드 앱을 개발하는 경우, 터치 이벤트와 연계하여 범위 유형 입력을 가능하게 하는 간단하고 쉬운 라이브러리가 있습니다.
데모
이 문제에 대한 자세한 내용은 이 스레드를 참조하십시오.
Mobile Safari(Webkit)용 HTML5 범위 입력 재생성
또 다른 접근법 - 어떤 유형의 이벤트를 처리해야 하는지 시그널링하는 요소에 플래그를 설정하기만 하면 됩니다.
function setRangeValueChangeHandler(rangeElement, handler) {
rangeElement.oninput = (event) => {
handler(event);
// Save flag that we are using onInput in current browser
event.target.onInputHasBeenCalled = true;
};
rangeElement.onchange = (event) => {
// Call only if we are not using onInput in current browser
if (!event.target.onInputHasBeenCalled) {
handler(event);
}
};
}
JavaScript "ondrag" 이벤트를 사용하여 계속 실행할 수 있습니다.다음과 같은 이유로 "input"보다 낫다)"
브라우저 지원
"ondrag" 이벤트와 "change" 이벤트를 구분할 수 있습니다."input"은 드래그와 변경 모두에 대해 실행됩니다.
jQuery의 경우:
$('#sample').on('drag',function(e){
});
참고 자료: http://www.w3schools.com/TAgs/ev_ondrag.asp
언급URL : https://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging
'programing' 카테고리의 다른 글
| 열 정렬을 utf8mb4_general_ci에서 utf8mb4_bin으로 변경하면 테이블이 손상됨 (0) | 2023.01.19 |
|---|---|
| php: 어레이 키 케이스 *insensitive* lookup? (0) | 2023.01.08 |
| JavaScript에서 Const: 언제 사용할지, 필요한지를 확인합니다. (0) | 2023.01.08 |
| JTable 삽입 후 테이블 모델을 새로 고치는 방법 데이터 삭제 또는 업데이트 (0) | 2023.01.08 |
| IPv4, IPv6 주소를 문자열로 저장하는 크기 (0) | 2023.01.08 |