Question

我想为点击范围元素指定不同的步骤。默认情况下，应该可以将滑块拖动到任何值，但是仅通过单击即可达到特定的值，例如“ 30”和“ 70”。如果用户单击范围轨道上的任何值，则应根据其单击的位置（接近30或70）自动结束为“ 30”或“ 70”。有没有办法用HTML或Javascript实现类似的东西？我只能使用以下代码来完成点击和拖动的相似操作：

<input id="slider" type="range" value="0" min="0" max="100" step="30">

感谢您的帮助。

Answer 1

您可以使用事件处理程序来实现。由于鼠标的拖动和点击会发送一些相同的事件，因此您可以通过检查事件之间鼠标位置的变化来区分它们。

<body>
    <input id="slider" type="range" value="0" min="0" max="100"/>
</body>
<script>
    // Keep track of coordinates on mouse down event
    var x = 0, y = 0;

    // Avoid adjusting value from slight mouse movement on click
    var delta = 5;

    function savePosition(e) {
        x = e.pageX;
        y = e.pageY;
    };

    function adjust(e) {
        if (Math.abs(x - e.pageX) > delta || Math.abs(y - e.pageY) > delta) {
            // Drag detected: Keep current value
            return;
        }

        // Click detected
        var newValue = 30;
        if (e.target.value > 50) {
            newValue = 70;
        }
        e.target.value = newValue;
    };

    var el = document.getElementById('slider');
    el.addEventListener('mousedown', savePosition);
    el.addEventListener('mouseup', adjust);
    el.addEventListener('click', adjust);
    el = undefined;

</script>

单击范围元素与拖动元素相比的不同步骤

1 个答案: