在 iOS 7 上，Mobile Safari 中的<select> 菜单在用户单击“完成”之前不会触发更改事件。是否有任何其他事件可以让我知道用户的选择何时发生变化？
<select onchange="alert('This will not fire until the user clicks Done')">
<option>1</option>
<option>2</option>
</select>
【问题讨论】：
标签： javascript iphone html ios7 mobile-safari
在用户触摸“完成”之前无法确定新的选择值。
当用户第一次触摸<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);
}
使用this test，即使您更改了 UI 上的选定项目，您也会看到这一点；在您触摸“完成”（即最终消息发送到 DOM 时）之前，记录的索引不会改变。
所以，你可以做的是； （有一些 UX 权衡）；而不是<select> 元素，创建一个自定义控件，它会在<div> 或<ul> 中弹出一个选项列表。这样，您将不会触发本机 UI，用户也不会离开 DOM。并且您将能够收听菜单和单击项目的事件。
只需确保您的控件适合移动设备即可。
【讨论】：
iOS 上的移动 Safari 不会触发 change 事件。
解决方法：
同时使用 blur 和 change，您可以附加一个在触发一次时解除绑定的事件处理程序：jQuery has $().one()
$("input[type='select']").one("blur change", function(){
//will only execute once
alert('This will fire sure and only once');
});
注意：如果您需要让每个 DOM 元素多次执行该函数，您可以使用 setTimeout 重新应用它，以避免双重触发。
【讨论】：