Question

我正在尝试将div中的click事件委托给范围值，该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/

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

此致帕特里克

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委托给输入类型范围

1 个答案: