iPhone - Evento di invio JavaScript - Il menu di selezione personale non si apre su una funzione setTimeout

Question

Si prega di aprire questi esempi sul proprio iPhone.

Il seguente codice rappresenta il comportamento corretto.

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

Se si aggiunge una funzione setTimeout non funzionerà.

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

Qualsiasi idea del perché?

Vedo anche uno strano problema di scorrimento. Se ci sono due menu selezionati, scorrerà verso il basso fino al pulsante ed eseguirà il backup se si utilizzano le frecce native (selezionare le opzioni) sinistra e destra. Se si fa clic su fatto che non fa questo o fare clic su di essi manualmente:

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

Bene, questo è tutto molto strano. I pensa a che hai riscontrato un bug iOS per quanto riguarda i timer. Ecco una leggermente diversa sul tuo esempio, che riproduce il problema:

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 browser non-mobile e Android Chrome, questo si comporta come ci si potrebbe aspettare con entrambi i tasti causando la selezione per attivare . Sia su iOS Safari che su iOS Chrome, toccando il pulsante "Ritarda", la selezione riceve la messa a fuoco, ma non accade nient'altro.

Non credo di avere una spiegazione molto soddisfacente diversa da "bug"! Ho notato che here sembravano aver incontrato qualcosa di simile. Non ho provato la soluzione suggerita.