jQuery onMouseover/onClick Dokunmatik Ekran kullanıcıları için (ör. IPad)

Question

Böylece, ekranın sağ üst köşesinde 6 "mücevher düğmeleri" menüsünü en aza indiren web sitesi tabanlı bir sistemde daraltılabilir bir menü yaptım. aynı ve menü içindeki öğelere atıfta bulunan uyarıların sayısı olan bir sayı içerir.

Bunların içeriği benim sorumumla gerçekten alakalı değildir, ancak bu nedenle sadece metinsel olmadıklarını ve bu nedenle menü öğelerinin ne yaptığını açıklayan etiketleri okumayı kolay ve açık olmadıklarını açıklamaktadır.

Bu nedenle, her menü öğesinin ne olduğunu açıklayan gizli bir div görüntüleyen bir "En çok" araç ipucunu yerleştirdim.

Ayrıca jQuery'nin menüyü görünüm olarak kaydırdığı bir onClick olayı da vardır.

Bu, özel bir intranet sistemi yeterince açık değil gibi ortak web sitesinde bu menüleri kullanın, ancak bu uygulama olduğu göz önüne alındığında olmaz edilir, benim problem:

için bir iPad izlendiğinde örnek (ve muhtemelen diğer dokunmatik ekranlı cihazlar), onMouseover bir onClick olarak ele alınır, bu nedenle, butona 'tıklamak' sadece araç ipucunu gösterir ve menüyü gerektiği gibi göstermez.

Bu kullanımla ilgili öneri nedir?

bunu ben iPad kullanıcılarını algılamak ve iPad kullanıcıları için OnMouseOver komutu görmezden jQuery yeniden inşa olabilecek bir özel web uygulaması olduğunu göz önüne alındığında, bu iş parçacığı Detect iPad users using jQuery? böylece gördük, ama ben olsaydı şeye benzer bir uygulamayı genişletmeye

Daha fazla kullanıcısı olabilir, bu iki olayın üstesinden gelmenin yolu ne olurdu?

Answer 1

if ("ontouchstart" in window || "ontouch" in window) { 
    // bind the relevant functions to the 'touch'-based events for iOS 
} 
else { 
    // use the classic mouse-events, 'mouseover,' 'click' and so on. 
} 

ben olmadan da olsa şu basit demo ile test ettik olay bağlayıcı Ben de kolaylığı için, bir TinyURL o demo yönlendirmek için yaptık (tam ekran JS Fiddle demo yılında (henüz) iOS cihazlarına giriş: tinyurl.com/drtjstest2/).

Revize olay tahsis fonksiyonları ile demo:

var body = document.getElementsByTagName('body')[0]; 

if ("ontouchstart" in window) { 
    body.style.backgroundColor = 'red'; 
    body.ontouchstart = function(){ 
     this.style.backgroundColor = 'yellow'; 
    }; 
    body.ontouchend = function(){ 
     this.style.backgroundColor = 'green'; 
    }; 
} 
else { 
    body.style.backgroundColor = 'green'; 
    body.onmousedown = function(){ 
     this.style.backgroundColor = 'yellow'; 
    }; 
    body.onmouseup = function(){ 
     this.style.backgroundColor = 'red'; 
    }; 
} 

JS Fiddle demo (ve TinyUrled alternatif: tinyurl.com/drtjstest3/).

Referanslar: Burada Stackoverflow at

• Sorular ve cevaplar:
  • Detecting support for a given JavaScript event?
  • iOS Web App touch gestures