iPhone - JavaScript调度事件 - 我的选择菜单不会在setTimeout函数上打开

Question

请在iPhone上打开这些示例.

以下代码是正确的行为.

<select id="selectMenu">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<input id="button" name="button" type="button" value="Click Me" />


var initEvt = function (el, type) {
        var e = document.createEvent('MouseEvents');
        e.initEvent(type, true, true, window);
        el.dispatchEvent(e);
    },
    selMenu;

selMenu = document.getElementById('selectMenu');

document.getElementById('button').onclick = function () { 
    initEvt(selMenu, 'mouseover');
    initEvt(selMenu, 'mousedown');
    initEvt(selMenu, 'mouseup');
    initEvt(selMenu, 'click');   
}

http://jsfiddle.net/ghwfstmj/

如果添加setTimeout函数,它将无法正常工作.

<select id="selectMenu">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<input id="button" name="button" type="button" value="Click Me" />


var initEvt = function (el, type) {
        var e = document.createEvent('MouseEvents');
        e.initEvent(type, true, true, window);
        el.dispatchEvent(e);
    },
    selMenu;

selMenu = document.getElementById('selectMenu');

document.getElementById('button').onclick = function () { 
    setTimeout(function () {
        initEvt(selMenu, 'mouseover');
        initEvt(selMenu, 'mousedown');
        initEvt(selMenu, 'mouseup');
        initEvt(selMenu, 'click');  
    }, 500);
}

http://jsfiddle.net/ghwfstmj/1/

知道为什么吗？

我也看到一个奇怪的卷轴问题.如果有两个选择菜单,它将向下滚动到按钮并在使用本机(选择选项)左右箭头时备份.如果单击"完成",则不会执行此操作或手动单击它们:

select { 
    display: block; 
    width: 100%; 
}
#selectMenu { margin-bottom: 50px; }
#selectMenu2 { margin-bottom: 200px; }

<select id="selectMenu">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select id="selectMenu2">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<input id="button" name="button" type="button" value="Click Me" />

var initEvt = function (el, type) {
        var e = document.createEvent('MouseEvents');
        e.initEvent(type, true, true, window);
        el.dispatchEvent(e);
    },
    selMenu;

selMenu = document.getElementById('selectMenu');

document.getElementById('button').onclick = function () { 
        initEvt(selMenu, 'mouseover');
        initEvt(selMenu, 'mousedown');
        initEvt(selMenu, 'mouseup');
        initEvt(selMenu, 'click');  
}

http://jsfiddle.net/ghwfstmj/4/

干杯!

Answer 1

嗯，这一切都很奇怪。我认为您遇到了有关计时器的 iOS 错误。这是对您的示例略有不同的看法，它重现了该问题：

var raiseSelectMenu = function () {
  var eventOptions = {
    'view': window,
    'bubbles': true,
    'cancelable': true
  };
  var menu = document.getElementById('selectMenu');
  menu.dispatchEvent(new MouseEvent('mousedown', eventOptions));
  menu.dispatchEvent(new MouseEvent('mouseup', eventOptions));
};
    
var delayRaiseSelectMenu = function () {
  window.setTimeout(raiseSelectMenu, 0);
};
    
document.getElementById('delay').onclick = delayRaiseSelectMenu;
document.getElementById('nodelay').onclick = raiseSelectMenu;

<select id="selectMenu">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<input id="delay" type="button" value="Delay">
<input id="nodelay" type="button" value="No Delay">

在非移动浏览器和 Android Chrome 上，这与我们预期的一样，两个按钮都会导致选择激活。在 iOS Safari 和 iOS Chrome 上，点击“延迟”按钮会导致选择接收焦点，但不会发生其他任何情况。

我不相信除了“bug”之外我还有一个非常令人满意的解释！我注意到他们在这里似乎也遇到了类似的事情。我还没有尝试建议的解决方法。