Javascript 将事件从 div 委派到输入类型范围答案

【问题标题】：Javascript delegating events from div to input type rangeJavascript 将事件从 div 委派到输入类型范围
【发布时间】：2015-01-13 10:29:15
【问题描述】：

我正在尝试将来自我的 input[type=range] 上方的 div 的点击事件委托给范围值。这意味着，如果我单击或触摸范围栏，则 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)
    });
});

这里是小提琴，如果你愿意的话：

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

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

问候，帕特里克

【问题讨论】：

您的小提琴中缺少对 jQuery 的引用。添加后，它似乎按预期工作？
嘿，对不起！我更新了参考，是的，但滑块并没有移动。
您希望滑块相对于您在 div 中单击的位置移动吗？好像滑块更大了？
是的，没错！有可能吗？
是的，这是可能的。将模拟一个示例。

标签： javascript jquery events delegates range

【解决方案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/

【讨论】：