iPhone - JavaScript Dispatch Event - My Select Menu sẽ không mở trên chức năng setTimeout

Question

Vui lòng mở các ví dụ này trên iPhone của bạn.

Mã bên dưới là hành vi đúng.

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

Nếu bạn thêm một hàm setTimeout nó sẽ không hoạt động.

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

Bất cứ ý tưởng tại sao?

Tôi cũng thấy sự cố cuộn lạ. Nếu có hai menu được chọn, nó sẽ cuộn xuống nút và sao lưu nếu bạn sử dụng mũi tên trái và phải (tùy chọn chọn). Nếu bạn nhấp vào thực hiện nó không làm điều này hoặc bấm vào chúng bằng tay:

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

Vâng, điều này rất kỳ quặc. Tôi nghĩ rằng bạn đã gặp lỗi iOS liên quan đến bộ hẹn giờ. Dưới đây là một hơi khác nhau trên ví dụ của bạn, khả năng tái tạo các vấn đề:

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

Trên các trình duyệt không di động và Android Chrome, này cư xử như chúng ta có thể mong đợi với cả hai nút gây ra chọn để kích hoạt . Trên cả iOS Safari và iOS Chrome, hãy nhấn vào nút 'Trì hoãn' làm cho lựa chọn nhận tiêu điểm nhưng không có gì khác xảy ra.

Tôi không tin rằng tôi có một lời giải thích rất thỏa đáng hơn là "lỗi"! Tôi nhận thấy rằng here họ dường như đã gặp phải một cái gì đó tương tự. Tôi đã không cố gắng workaround đề nghị.