Mobil tarayıcılar devre dışı bırakın vurgulu etkileri

Hem masaüstü ve tablet kullanılmak üzere tasarlanmış bir Web sitesi yazıyorum. Bir masaüstünden ziyaret ettiği zaman, ekranın tıklanabilir Alanları :hover etkileri (farklı arka plan rengini, vb.) ile aydınlatmak istiyorum Bir tablet ile Fare yok hayır, herhangi bir vurgulu etkileri istemiyorum.

Sorun, ne zaman ben bir şey üzerinde dokunun tablet, tarayıcı besbelli olan bir çeşit "görünmez fare imleci" bu hareket için konum dinledim, ve sonra yaprakları var -- şey, ben sadece aday ışıkları ile bir hover efekti kadar dokunun başka bir şey.

Nasıl fareyi kullanarak, ama dokunmatik ekranı kullanarak olduğumda onları bastırmak olduğumda vurgulu etkileri alabilir miyim?

Birisi ona teklif etmeyi düşünüyordum, user-agent koklama kullanmak istemiyorum. Aynı cihaz bir dokunmatik ekran ve bir fare (ortak belki bugün değil, ama ileride çok daha fazla değil) her ikisi de olabilir. Cihaz ilgilenmiyorum, şu anda nasıl kullanıldığını merak ediyorum: fare veya dokunmatik ekran.

Denedim zaten takma touchstart, touchmove touchend olaylar ve arama preventDefault() bütün bunları, bastırmak "görünmez fare imleci" bazı zamanlar; ama eğer ben dokunun hızla ileri geri arasında iki farklı element, sonra bir kaç muslukları başlayacak hareket "fare imleci" ve aydınlatma hover etkileri her neyse ... benim gibi preventDefault değil her zaman onur duydum. Gerekli bile kabul etmek doğru bir yaklaşım emin değilim tabii, detaylara girmeyeceğim; eğer herkes daha basit bir düzeltme varsa, dinliyorum.

Düzenleme:Bu standart bataklık CSS :hover ama burada başvuru için hızlı bir yeniden oluşturma ile yeniden.

<style>
  .box { border: 1px solid black; width: 150px; height: 150px; }
  .box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>

Eğer kutularından birinin üzerinde fare, istiyorum ki mavi bir arka plan olacak. Ama kutulardan birinin üzerine dokunun, ayrıca engel olmaya çalışıyorum şey mavi bir arka plan olacak.

Ayrıca yukarıda yaptığı 51 ** bir örnek gönderdiniz ve de bir WordPress kullanmak fare olayları kanca. Dokunun olaylar da mouseenter, mousemove mouseleave yangın görmek için kullanabilirsiniz.

CEVAP

16 Mart 2014, Pazar

Hover efekti sayfanızın içeriği değiştiren sorunuzu anlıyorum. Bu durumda, tavsiyem şudur:

touchstart mouseenter hover efektleri ekleyin.
mouseleave, touchmove click hover efektleri Kaldır.

Alternatif olarak, içerik değişiklik yok hayır o sayfanızı düzenleyebilirsiniz.

Arka plan

Sipariş simüle etmek için bir fare, tarayıcılar gibi aynı zamanda Y mobil yangın, aşağıdaki olaylar eğer bir kullanıcı dokunur ve bültenleri bir parmak dokunmatik ekran (iPad gibi) (kaynak: Touch And Mouse html5rocks.com):

touchstart
touchmove
touchend
300ms tarayıcı bu bir tek musluk, çift dokunun olduğundan emin yapar gecikme
mouseover
mouseenter
- Not: mouseover, mouseenter mousemove bir etkinlik sayfası içeriği değişirse, aşağıdaki olaylardan hiç kullanılmamış.
mousemove
mousedown
mouseup
click

Mümkün sadece tarayıcıda fare olayları atlamak için söyle görünmüyor.

Daha da kötüsü, eğer fare üzerinde bir etkinlik sayfası içeriği değişirse, click olayı hiç belli şekil 6.4 Safari Web Content Guide - Handling Events, açıklandığı gibi ateşlediBir Parmak Olaylar. Tam olarak ne bir "değişim", tarayıcı ve sürümü bağlıdır. içerik İOS için arka plan rengi 7.0, bir değişiklik (artık?) olduğunu buldum içerik değişikliği.

Çözümü Açıkladı

Özetlemek gerekirse:

touchstart mouseenter hover efektleri ekleyin.
mouseleave, touchmove click hover efektleri Kaldır.

touchend eylem yok unutmayın!

Bu açıkça fare olayları için çalışır: mouseenter mouseleave (mouseover mouseout biraz gelişmiş versiyonları) ateş ve vurgulu Ekle / Kaldır.

Eğer kullanıcı aslında clickbir bağlantı varsa, hover efekti de kaldırılır. Bu kullanıcı web tarayıcısının Geri düğmesine basarsa kaldırılır emin olun.

Hover efekti eklenir üzerine touchstart. bu da dokunma olayları için çalışır: "'"'Touchend kaldırıldı. Olacağını da sözlerine ekledi yine mouseenter, ve o zamandan beri bu nedenler hiçbir içerik değişiklikleri (daha önce eklenmiş), click olay da kovdu bağlantı takip gerek kalmadan kullanıcı için tekrar tıklayın!

Bu 300ms bir tarayıcı touchstart arasında bir olay olan gecikme ve click aslında hover efekti bu kısa süre zarfında gösterilen olacak çünkü iyi kullanmak koymak.

Eğer kullanıcı iptal ' i almaya karar verirse parmak hareketi normal olarak öyle yapacağım. Normalde, bu mouseleave hiçbir olay harekete geçirilen ve hover efekti yerde kalır, çünkü bu bir sorun değildir. Neyse ki, bu kolayca touchmove hover efekti kaldırarak tespit edilebilir.

İşte bu!

300ms gecikme kaldırmak mümkün, örneğin bu soru için ama bu kapsam dışında FastClick library kullanmayı unutmayın.

Alternatif Çözümler

Aşağıdaki alternatifler ile aşağıdaki sorunlarla buldum:

tarayıcı algılama:Hata eğilimli son derece. Bir cihaz hem de bir arada dokunmatik ekranların prolifirate zaman daha fazla ve daha yaygın hale iken fare veya dokunmatik var varsayar.
Medya algılama CSS:Tek CSS-sadece farkındayım çözüm. Bir aygıt hem mümkün iken fare veya dokunmatik vardır, o hala hata eğilimli, ve hala varsayar.
touchend: click olayı taklitBu kullanıcı sadece kaydırma veya yakınlaştırma, aslında bağlantısına tıklayarak niyeti olmadan istese bile yanlış bağlantı takip edecek.
Bastırmak için bir değişken kullanmak fare olayları:Bu durumda bir sonraki fare gibi olaylar zaman içinde bu noktada devlet değişiklikleri önler için kullanılan touchend bir değişken ayarlayın. Değişken click olayı sıfırlanır. Bu sayfada Walter Roman cevaba bakınız. Bu Eğer gerçekten dokunmatik arayüzleri üzerinde hover efekti istemiyorsanız mi iyi bir çözümdür. Ne yazık ki, bu işe yaramazsa eğer bir touchend ateş için başka bir sebep ve Hayır ' ı tıklatın olay, ateş (örneğin kullanıcı kaydırılan veya yakınlaştırma) ve daha sonra çalışırken aşağıdaki bağlantı ile Fare (ben.her iki fare ve klavye) ile bir cihaz üzerinde e.