如何将onmousedown和onchange一起使用

how to use onmousedown and onchange together

本文关键字：一起 onchange onmousedown      更新时间：2023-09-26

我有一个div和三个滑动条，即输入类型=范围。相应地拖动滑动条时，div的背景颜色会发生变化。我用"onchange"事件调用了一个有两个参数this.value和一个数字的函数；设置div的背景色三个滑动条表示"rgb"值，范围为0-255。到目前为止，这是有效的。

但我希望它的运作方式并不是现在正在发生的事情。拖动滑动条时，颜色不会发生变化，而是在"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来实时获取更改。请注意，某些版本的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>

jsFiddle

相关文章：