[英]how to use onmousedown and onchange together
我有一個div和三個滑動條，即輸入type = range。 相應地拖動滑桿時，div的背景色將更改。 我已經使用'onchange'事件來調用帶有2個參數this.value和一個數字的函數； 設置div的背景色三個滑動條代表范圍為0-255的'rgb'值。 到目前為止，這是可行的。
但是我不希望它現在起作用的方式。 拖動滑塊時，顏色不會改變，而是在發生“ onmouseup”操作時改變。 我希望在拖動滑塊時改變顏色。 這是我的代碼：
<html>
<head>
<script>
var r=0;
var g=0;
var b=0;
function set(){
r=g=b=128;
document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
}
function change(val,bar){
if (bar==1){
r=val;
}
if (bar==2){
g=val;
}
if (bar==3){
b=val;
}
document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
}
</script>
</head>
<body onload="set()">
<div id="div" style="width:400px;height:100px;">
</div>
<table border="">
<tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,1)"></td></tr>
<tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,2)"></td></tr>
<tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,3)"></td></tr>
</table>
</body>
</html>
您可以使用onInput使更改onInput 。 請注意，某些版本的IE不支持onInput ，因此我在其中保留了onChange作為后備，以覆蓋您的所有基礎。
var r=0; var g=0; var b=0; function set() { r=g=b=128; var div = document.getElementById('div'); div.style.backgroundColor="rgb("+r+","+g+","+b+")"; } function change(val,bar){ if (bar==1){ r=val; } if (bar==2){ g=val; } if (bar==3){ b=val; } var div = document.getElementById('div'); div.style.backgroundColor="rgb("+r+","+g+","+b+")"; }
<html> <head> </head> <body onload="set()"> <div id="div" style="width:400px;height:100px;"></div> <table border=""> <tr> <td>red</td> <td> <input id="r_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,1)" onchange="change(this.value,1)"> </td> </tr> <tr> <td>blue</td> <td> <input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)" onchange="change(this.value,2)"> </td> </tr> <tr> <td>green</td> <td> <input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)" onchange="change(this.value,3)"> </td> </tr> </table> </body> </html>
您可以為此使用輸入事件處理程序。 例如：
<input type="range" oninput="change(this.value,x)">
您可以使用onInput事件，而不是在發生更改后觸發的onChange 。 （ 更多信息 ）。
需要注意的重要一點是， onInput （僅與input:type=range ）在IE8及以下版本，Opera 9及以下版本中均不可用。
<table border="">
<tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,1)"></td></tr>
<tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)"></td></tr>
<tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)"></td></tr>
</table>
一起使用onmousedown，onchange和onblur時IE11崩潰
[英]IE11 crashes when use onmousedown, onchange, onblur together
有什么辦法可以同時使用onmouseover和onmousedown嗎？
[英]Is there any way to use onmouseover and onmousedown together?
如何將getElementsByClassName，onchange和this.value一起使用？
[英]How to use getElementsByClassName, onchange and this.value together?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.