Cordova iOS端Range输入框change/input事件失效问题求助

使用SugarCube开发游戏时，为音乐和音效设置的音量滑块功能，在PC端Edge、Mac端Safari、Android端Cordova编译的APK中均正常工作，但在iOS设备的Cordova应用里，Range输入框的change和input事件完全无法触发，导致无法实时调节音量。原代码如下：

<label for="musica">Activar música</label><input type="checkbox" id="musica">
<label for="vmusica" id="smusica">Volumen de la música</label><input type="range" min="0" max="100" step="10" id="vmusica">
<label for="efectos">Activar efectos de sonido</label><input type="checkbox" id="efectos">
<label for="vefectos" id="sefectos">Volumen de los  efectos de sonido</label><input type="range" min="0" max="100" step="10" id="vefectos">
<script>
document.querySelector("#vmusica").value=parseInt(SugarCube.State.variables.vmusica*100);
document.querySelector("#musica").checked=SugarCube.State.variables.sonidito;
document.querySelector("#vmusica").style.display =document.querySelector("#musica").checked ? "inline-block" : "none";
document.querySelector("#smusica").style.display =document.querySelector("#musica").checked ? "inline-block" : "none";
document.querySelector("#vefectos").value=parseInt(SugarCube.State.variables.vefectos*100);
document.querySelector("#efectos").checked=SugarCube.State.variables.efectitos;
document.querySelector("#vefectos").style.display =document.querySelector("#efectos").checked ? "inline-block" : "none";
document.querySelector("#sefectos").style.display =document.querySelector("#efectos").checked ? "inline-block" : "none";
document.querySelector("#efectos").addEventListener("change", function(){
SugarCube.State.variables.efectitos=this.checked ? true : false;
SugarCube.State.display("efectos",SugarCube.Story.get("efectos"));
});
document.querySelector("#musica").addEventListener("change", function(){
SugarCube.State.variables.sonidito=this.checked ? true : false;
if (this.checked) {
SugarCube.State.display("sonido",SugarCube.Story.get("efectos"));
}
else{
SugarCube.SimpleAudio.select(":playing").pause();
}
SugarCube.State.display("efectos",SugarCube.Story.get("efectos"));
});
document.querySelector("#vmusica").addEventListener("change", () => {
SugarCube.State.variables.vmusica=parseFloat(document.querySelector("#vmusica").value/100);
SugarCube.SimpleAudio.select(":playing").volume(SugarCube.State.variables.vmusica);
});
document.querySelector("#vefectos").addEventListener("change", () => {
SugarCube.State.variables.vefectos=parseFloat(document.querySelector("#vefectos").value/100);
});
</script>

解决建议 #

• 双事件监听兼容iOS触摸交互：iOS的WebView对Range滑块的input事件支持存在兼容性问题，同时绑定touchmove和change事件，touchmove负责实时响应拖动操作，change处理拖动结束后的最终值，覆盖所有交互场景。
• 缓存DOM元素减少重复查询：提前获取并缓存滑块和复选框的DOM元素，避免每次事件触发时重复查询DOM，既提升性能也避免潜在的上下文丢失问题。
• 确保事件绑定在DOM就绪后执行：SugarCube页面渲染有自身的生命周期，确保元素已经存在于DOM中再绑定事件，避免无效绑定。

修改后的代码示例 #

<label for="musica">Activar música</label><input type="checkbox" id="musica">
<label for="vmusica" id="smusica">Volumen de la música</label><input type="range" min="0" max="100" step="10" id="vmusica">
<label for="efectos">Activar efectos de sonido</label><input type="checkbox" id="efectos">
<label for="vefectos" id="sefectos">Volumen de los  efectos de sonido</label><input type="range" min="0" max="100" step="10" id="vefectos">
<script>
// 缓存DOM元素，避免重复查询
const musicaCheckbox = document.querySelector("#musica");
const vmusicaSlider = document.querySelector("#vmusica");
const smusicaLabel = document.querySelector("#smusica");
const efectosCheckbox = document.querySelector("#efectos");
const vefectosSlider = document.querySelector("#vefectos");
const sefectosLabel = document.querySelector("#sefectos");

// 初始化UI状态
vmusicaSlider.value = parseInt(SugarCube.State.variables.vmusica * 100);
musicaCheckbox.checked = SugarCube.State.variables.sonidito;
vmusicaSlider.style.display = musicaCheckbox.checked ? "inline-block" : "none";
smusicaLabel.style.display = musicaCheckbox.checked ? "inline-block" : "none";

vefectosSlider.value = parseInt(SugarCube.State.variables.vefectos * 100);
efectosCheckbox.checked = SugarCube.State.variables.efectitos;
vefectosSlider.style.display = efectosCheckbox.checked ? "inline-block" : "none";
sefectosLabel.style.display = efectosCheckbox.checked ? "inline-block" : "none";

// 复选框事件处理
efectosCheckbox.addEventListener("change", function(){
    SugarCube.State.variables.efectitos = this.checked;
    SugarCube.State.display("efectos", SugarCube.Story.get("efectos"));
    // 同步更新滑块显示状态
    vefectosSlider.style.display = this.checked ? "inline-block" : "none";
    sefectosLabel.style.display = this.checked ? "inline-block" : "none";
});

musicaCheckbox.addEventListener("change", function(){
    SugarCube.State.variables.sonidito = this.checked;
    if (this.checked) {
        SugarCube.State.display("sonido", SugarCube.Story.get("efectos"));
    } else {
        SugarCube.SimpleAudio.select(":playing").pause();
    }
    SugarCube.State.display("efectos", SugarCube.Story.get("efectos"));
    // 同步更新滑块显示状态
    vmusicaSlider.style.display = this.checked ? "inline-block" : "none";
    smusicaLabel.style.display = this.checked ? "inline-block" : "none";
});

// 音乐音量更新逻辑：兼容iOS触摸事件
function updateMusicVolume() {
    const volume = parseFloat(vmusicaSlider.value / 100);
    SugarCube.State.variables.vmusica = volume;
    SugarCube.SimpleAudio.select(":playing").volume(volume);
}
vmusicaSlider.addEventListener("change", updateMusicVolume);
vmusicaSlider.addEventListener("touchmove", updateMusicVolume);

// 音效音量更新逻辑：兼容iOS触摸事件
function updateEffectsVolume() {
    const volume = parseFloat(vefectosSlider.value / 100);
    SugarCube.State.variables.vefectos = volume;
}
vefectosSlider.addEventListener("change", updateEffectsVolume);
vefectosSlider.addEventListener("touchmove", updateEffectsVolume);
</script>

额外提示 #

• 若仍存在问题，可添加click事件作为 fallback，覆盖所有可能的交互方式；
• 检查Cordova的iOS WebView配置，确保未禁用触摸事件或JavaScript交互；
• iOS环境下音频播放需要用户主动交互触发，确保音量调节前已有用户操作激活音频上下文。

内容的提问来源于stack exchange，提问作者César Verástegui