javascript - 在用户关闭弹出窗口之前，如何检测 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 会为选择选项打开 native 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);
}

与 this test ，即使您更改了 UI 上的选定项目，您也会看到；在您触摸“完成”(这是将最终消息发送到 DOM 时)之前，记录的索引不会更改。

所以，你能做的是； (有一些用户体验权衡)；而不是 <select>元素，创建一个自定义控件，在 <div> 中弹出选项列表或 <ul> .这样，您就不会触发 native UI，用户也不会离开 DOM。您将能够监听菜单和点击项目的事件。

只需确保您的控件适合移动设备即可。

为 iOS 设备启用 Safari Web Inspector:

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