Javascript 将事件从 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)
    });
});
如果你

愿意,这是小提琴:

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

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

问候帕特里克

基本思想是获取单击的鼠标位置(相对于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/

最新更新