iPhone - JavaScript Dispatch Event - Seçtiğim Menü bir setTimeout işlevi açılmıyor

Question

Lütfen bu örnekleri iPhone'unuzda açın.

Aşağıdaki kod doğru davranışdır.

http://jsfiddle.net/ghwfstmj/

sen işe yaramaz bir setTimeout işlevi eklerseniz

<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'); 
} 

.

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

herhangi bir fikir neden

?

Ayrıca bir tuhaf kaydırma sorunu görüyorum. Eğer iki seçim menüsü varsa, düğmeye aşağı doğru ilerler ve yerel (seçim seçenekleri) sol ve sağ okları kullanırsanız yedeklenir. İşiniz tıklatırsanız bunu yapmak veya el onlara tıklayın değildir:

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/

Şerefe!

Answer 1

Bu çok garip. I , modelini, zamanlayıcılarla ilgili bir iOS hatasıyla karşılaştıysanız. Mobil olmayan tarayıcılar ve Android Chrome'da

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

biz etkinleştirmek için seçin neden hem düğmeleri ile tahmin edebileceğiniz gibi bu davranır,: Burada problem çoğalır sizin örnek üzerinde biraz daha farklı bir take, var . Hem iOS Safari hem de iOS Chrome'da, 'Gecikme' düğmesine dokunarak seçmenin odaklanmasına neden olur, ancak başka bir şey olmaz.

"Hata" dışında çok tatmin edici bir açıklamaya sahip olduğuma inanmıyorum! here'un benzer bir şeyle karşılaştıkları görülüyor. Önerilen geçici çözümü denemedim.