如何一起使用onmousedown和onchange

我有一個div和三個滑動條，即輸入類型=範圍。當相應地拖動滑動條時，div的背景顏色會發生變化。我已經使用'onchange'事件來調用帶有2個參數this.value和一個數字的函數;設置div的背景顏色三個滑動條表示'rgb'值，範圍爲0-255。到目前爲止，這是工作。如何一起使用onmousedown和onchange

但我希望它的工作方式不是現在正在發生的事情。拖動滑塊時，顏色不會改變，而是在發生「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>

來源

2016-04-29 Francis

可以使用輸入事件處理程序這一點。例如：

<input type="range" oninput="change(this.value,x)">

來源

2016-04-29 10:12:21

您可以使用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>

來源

2016-04-29 10:15:45 jdgregson

取而代之的是onChange的，觸發後的變化發生了，你可以使用onInput事件。（more info）。

要注意的是，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>

jsFiddle

來源

2016-04-29 10:15:45 Jordumus

如何一起使用onmousedown和onchange

回答

相關問題