javascript - 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/

知道为什么吗？

我还看到了一个奇怪的滚动问题。如果有两个选择菜单，它将向下滚动到按钮并在您使用 native (选择选项)左右箭头时返回。如果您单击完成，它不会执行此操作或手动单击它们:

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”我没有一个非常满意的解释!我注意到 here他们似乎遇到了类似的事情。我还没有尝试建议的解决方法。