Javascript 将 div 中的事件委托给输入类型范围

Question

我正在尝试将来自 div 的点击事件委托给范围值，该 div 高于我的输入 [type=range]。这意味着，如果我单击或触摸范围栏，div 的行为与范围滑块完全相同。

这是我的示例代码：

<div id="container" style="width: 200px; height: 200px; background-color: red;">
    <div id="scale" style="height: 100px;">
        Skala
    </div>
    <div style="height: 100px; text-align: center;">
        <input id="range" type="range" min="10" max="100"/>
    </div>
</div>

$(document).ready(function () {
    $('#scale').click(function (event){
        $('#range').trigger('change');
    });

    $('#range').change(function (event) {
        console.log(event)
    });
});

这里是fiddle，如果你想要：

http://jsfiddle.net/Ipad0214/ouf6x3xa/2/

我希望你理解我的问题，我想做什么。

此致，帕特里克

Answer 1

基本思路是获取你点击的鼠标位置（相对于div），将其缩放到你想要的范围，然后更新滑块值。

$(document).ready(function () {
    $('#scale').click(function (e) {
        var parentOffset = $(this).parent().offset();
        var relX = e.pageX - parentOffset.left;
        $('#range').val(relX).trigger('change');
    });

    $('#range').change(function (event) {
        console.log(event)
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ouf6x3xa/5/

缩放涉及相对于元素宽度的点击位置，然后缩放和偏移到滑块范围。

这个使用 div 的整个宽度作为滑块宽度，但您可能希望它是平行的。

示例： http://jsfiddle.net/TrueBlueAussie/ouf6x3xa/7/

Javascript 将 div 中的事件委托给输入类型范围

Javascript delegating events from div to input type range

javascript

jquery

events

delegates

range