Nhiều yếu tố phản hồi sự kiện chạm trên Webkit di động và Hammer JS

Question

Tôi đang làm việc trên một dự án nhỏ sử dụng thư viện Hammer JS và tôi gặp phải sự cố về trình mô phỏng Công cụ dành cho Chrome Dev và gỡ lỗi trên hai thiết bị iOS 7 . Dường như nó hoạt động tốt trên các trình duyệt máy tính để bàn. Fiddle ở đây: http://jsfiddle.net/w80baz5g/5/ và thông tin khác bên dưới.

Tôi đã một nhóm các yếu tố, như thế này:

<div> 
    <img class="item" id="item0" src="http://placehold.it/300x300"> 
    <img class="item" id="item1" src="http://placehold.it/300x300"> 
    <img class="item" id="item2" src="http://placehold.it/300x300"> 
</div> 

và Hammer JS nghe một sự kiện tap:

function initItems(el) { 
    var itemToTap = new Hammer.Manager(el, itemOptions); 
      itemToTap.add(new Hammer.Tap()); 
      itemToTap.on("tap", function(event) { 
       console.log("tapped: " + event.target); 
     }); 

} 

$(".item").each(function(){ 
    var itemToInit = $(this)[0]; 
    initItems(itemToInit); 
}); 

Trong khi trong các trình duyệt máy tính để bàn (Chrome, Safari) tất cả mọi thứ có vẻ tốt đẹp , trên thiết bị di động, chỉ ba phần tử đầu tiên dường như phản hồi sự kiện nhấn nhưng bảng điều khiển cho biết nó phản hồi cho cả ba yếu tố? Phần tử thứ hai và thứ ba không phản hồi.

Fiddle ở đây: http://jsfiddle.net/w80baz5g/5/

Tôi có thiếu gì đó không? Các sự kiện/yếu tố đó có được xử lý khác nhau bởi các trình duyệt di động không? Tại sao họ không phản hồi riêng lẻ với sự kiện nhấn?

Giúp đánh giá cao!

Answer 1

Thay vì:

$(".item").each(function(){ 
    var itemToInit = $(this)[0]; 
    initItems(itemToInit); 
}); 

Thử sử dụng:

$(".item[id^='item']")... 

Hoặc:

$("[id^='item']")... 

Và xem những gì sẽ xảy ra.