reactjs - 如何使用 Ipad 检索范围输入的点击事件值？

Question

目前正在使用 react typescript 网站内的自定义滑块（即“范围”类型的输入），它在桌面（MacO 和 Windows + 目标浏览器）和 android 上运行良好，但在 Ipad 上缺少一些东西（我们只关注平板电脑）。问题是我们不能通过点击滑块本身来设置值：我们可以拖动它并点击它顶部的标签，但不能点击里面的标签。

我已经看到许多主题告诉 Apple 可触摸设备对许多事件的工作方式不同，因此我调试了我的设备以查看问题所在。我的“onClick”方法根据来自事件的值设置滑块的当前值，但结果显示，只有在 Ipad（Safari 和 Chrome）上执行时，这两个变量才相等（所以我的滑块更新它值正确，但使用当前值）！在任何其他环境中，一切正常，事件的价值正确地应该是“未来价值”。

我还测试了如下所述的不同触摸事件，但没有一个是触发事件，即使有一些默认阻止。

这是滑块本身（仅触发 onClick）：

<input 
    type="range"
    min={-half}
    max={half}
    step="1"
    value={this.state.selectedRange}
    onTouchStart={(e: any) => { console.log("on touch : " + e.target.value);}}
    onTouchMove={(e: any) => { console.log("on touch : " + e.target.value);}}
    onTouchCancel={(e: any) => { console.log("on touch : " + e.target.value);}}
    onTouchEnd={(e: any) => { console.log("on touch : " + e.target.value);}}
    onTouch={(e: any) => { console.log("on touch : " + e.target.value);}}
    onClick={(e: any) => this.onClickSlider(e, "Inputslider + changer")}
    defaultValue={this.state.selectedRange}
    onChange={(e: any) => { this.onChange(e); }}
/>

和 onClickSlider ：

onClickSlider(e: any, m: string) {
    let value: any = e.target.value;

    console.log("New Value : " + e.target.value);
    // target value is equal to the current value... (only on Ipad)

    if (this.props.onChange) {
        if (!this.props.slider) {
            value = value - 1;
        }
        this.props.onChange(value);
    }
}

我没想到一个事件的价值行为会发生如此巨大的变化......

有没有人建议我如何检索用户触摸滑块的位置值（它可能涉及特定的平台条件）？

谢谢 ！

标签： reactjsipadinputrange

Answer 1

试试这个范围输入设置，看看它是否适合您的需要。它基于 jQuery，但您应该掌握这个想法。我尝试了许多失败的解决方案，并且无法在我的情况下使用 preventDefault，所以我鼓起了这个 gem，它允许即时范围输入拇指定位/滑动，无论你在元素上的 touchstart 和 touchmove 是什么位置：

document.on('touchstart touchmove', 'input[type="range"]', function(e){

var len = $(this).attr('max');
var offset = $(this).offset();
var xxx = (e.pageX - offset.left);
var xPercent = xxx/$(this).width();
var xPos = Math.round(len)*xPercent;

$(this).attr('value',xPos);
$(this).val(xPos).trigger('input');

});