如何同时使用 onmousedown 和 onchange答案

【问题标题】：how to use onmousedown and onchange together如何同时使用 onmousedown 和 onchange
【发布时间】：2016-05-20 16:22:02
【问题描述】：

我有一个 div 和三个滑动条，即输入类型 = 范围。当相应地拖动滑动条时，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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以为此使用输入事件处理程序。例如：

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

【讨论】：

【解决方案3】：

您可以使用onInput 事件，而不是在更改发生后触发的onChange。 (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

【讨论】：