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

【问题标题】：How to retrieve the click event's value of a range input with an Ipad?如何使用 Ipad 检索范围输入的点击事件值？
【发布时间】：2019-01-04 15:52:08
【问题描述】：

目前正在使用 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);
    }
}

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

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

谢谢！

【问题讨论】：

你试过onInput
onInput 也没有被触发：/
TouchEvents 怎么样？
正如我所说，我尝试了它们但没有被解雇：/

标签： reactjs ipad input range

【解决方案1】：

试试这个范围输入设置，看看它是否适合您的需要。它基于 jQuery，但您应该掌握这个想法。我尝试了许多失败的解决方案，但无法在我的情况下使用 preventDefault，所以我鼓起了这个 gem，它允许即时范围输入拇指定位/滑动 wherever 你在元素上 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');

});

【讨论】：