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);
    }
}

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

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

谢谢！

Answer 1

尝试使用此范围输入设置来查看它是否适合您的需求。它基于jQuery，但是您应该掌握这个想法。我尝试了许多失败的解决方案，并且无法在我的情况下使用preventDefault，所以我鼓起了这个gem，它允许您在元素上开始触摸并在元素上移动的即时范围输入拇指定位/滑动任何地方：

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');

});

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

1 个答案: