iPhone - Zdarzenie JavaScript Dispatch - Moje menu wyboru nie zostanie otwarte w funkcji setTimeout.

Question

Proszę otworzyć te przykłady na telefonie iPhone.

Poniższy kod jest prawidłowy.

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

Jeśli dodać funkcję setTimeout nie będzie działać.

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

Każdy pomysł dlaczego?

Widzę również dziwny problem przewijania. Jeśli istnieją dwa wybrane menu, przewinie się do przycisku i wykona kopię zapasową, jeśli używasz natywnych (wybierz opcje) lewej i prawej strzałki. Jeśli klikniesz zrobić to tego nie robi lub kliknij je ręcznie:

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/

Cheers!

Answer 1

Cóż, to wszystko jest bardzo dziwne. I think napotkasz błąd iOS w odniesieniu do timerów. Oto nieco odmienne spojrzenie na swoim przykładzie, który reprodukuje problem:

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">

on Non-mobilnych przeglądarek i Android Chrome, to zachowuje się jak moglibyśmy oczekiwać z obu przycisków powoduje select, aby uaktywnić . Zarówno w przeglądarce Safari na iOS, jak i iOS, naciśnięcie przycisku "Opóźnienie" powoduje, że wybrana opcja otrzymuje fokus, ale nic więcej się nie dzieje.

Nie wierzę, że mam bardzo satysfakcjonujące wyjaśnienie inne niż "błąd"! Zauważyłem, że here wydawało się, że napotkały coś podobnego. Nie próbowałem sugerowanego obejścia.