如何在用户关闭弹出窗口之前检测iOS7选择菜单上的更改事件？

Question

在iOS 7上,<select>Mobile Safari中的菜单在用户单击"完成"之后才会触发更改事件.当用户的选择发生变化时,是否还有其他可以听到的事件？

<select onchange="alert('This will not fire until the user clicks Done')">
    <option>1</option>
    <option>2</option>
</select>

Answer 1

在用户触摸"完成"之前无法确定新的选择值.

当用户首次触摸<select>控件时,iOS会打开选择选项的本机UI.这不是DOM.当用户触摸"完成"时,它会发送新值/索引并在DOM上触发相应的事件.

你可以测试一下.只需设置两个事件:onfocus将设置一个计时器并连续轮询,selectedIndex直到onblur触摸"完成"时销毁计时器.

<select id="my-select" onfocus="checkSelectedIndex()" onblur="selectDone()">
    <option>1</option>
    <option>2</option>
</select>

var timer;
// timer setup on focus
function checkSelectedIndex() {
    timer = window.setInterval(function () {
        console.log('selected index:', document.getElementById('my-select').selectedIndex);
    }, 500); // 2 polls per second
}

// timer cleared on blur
function selectDone() {
    console.log('Selection changed!');
    if (!timer) { return; }
    window.clearInterval(timer);
}

通过此测试,即使您在UI上更改了所选项目,您也会看到它; 在您触摸"完成"(即最终消息发送到DOM时)之前,记录的索引不会更改.

所以,你能做的是; (有一些UX权衡); 而不是一个<select>元素,创建一个自定义控件,弹出一个<div>或一个选项列表<ul>.这样,您就不会触发本机UI,用户也不会离开DOM.并且您将能够收听菜单和点击项目的事件.

只需确保您的控件感觉适合移动设备.

为iOS设备启用Safari Web Inspector:

1. 在iOS设备上,转到:设置»Safari»高级并启用Web Inspector.
2. 在桌面Safari上,转到:首选项»高级,然后选中"在菜单栏中显示开发人员菜单".将在Safari菜单中添加名为" Develop "的新菜单项.
3. 通过USB将iOS设备连接到计算机.
4. 打开要调试的页面(外部或本地主机URL).
5. 从桌面Safari 开发菜单中,选择设备名称,然后单击子菜单中的应用程序名称.