Dokunma aygıtları için tarayıcı taşıma mouseover olayı, yanlış tıklama olayı neden olur

Question

Tarayıcılar, dokunmatik aygıtlarda mouseover ve mouseleave olaylarını işleme biçiminde bir sorunum var.

Fareyi hareket ettirdiğinizde başka bir E öğesini gösteren ve gizleyen bir E öğem var. Öğe B, tıklama etkinliğine sahip bir düğmedir. Bu, bir fare kullanırken mükemmel derecede iyidir, ancak dokunma girdisini kullanırken, elbette ki bir mouseover yoktur. Tarayıcılar otomatik olarak, mouseover olayı tetiklendiğinde ve ekranın herhangi bir yerine dokunduğunuzda mouseleave olayının (çoğu zaman mantıklı olan) tetikleneceği şekilde otomatik olarak halledilir.

Artık benim sorunum, her iki olayın da tek dokunuşla bir defada ateşlenmesidir. Ve bunun etrafında bir yol bulamadım. Girişin fare mi yoksa dokunma girdisi mi olduğunu anlamanın bir yolu yok gibi görünüyor.

Sorunu vitrine birlikte basit jsfiddle koyduk:

https://jsfiddle.net/djmpx1q4/1/

$("#outer").hover(function(){ 
 
\t show(); 
 
}, function(){ 
 
\t hide(); 
 
}); 
 

 
function show() 
 
{ 
 
\t $("#inner").css('display', 'block'); 
 
    $("#inner").on('click', function(){ 
 
    \t alert('hello'); 
 
    }); 
 
} 
 

 
function hide() 
 
{ 
 
\t $("#inner").css('display', 'none'); 
 
    $("#inner").off('click'); 
 
}

#outer { 
 
    padding:50px; 
 
    width:200px; 
 
    height: 200px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
#border { 
 
    border: 1px solid black; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
#inner { 
 
    display: none; 
 
    width:100%; 
 
    height:100%; 
 
    background-color: #CC0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
<div id="border"> 
 
<div id="inner"> 
 

 
</div> 
 
</div> 
 
</div>

ateş etmekten, yani 2 musluklar olmak kırmızı kutu göstermek için ilkini ve ikinci bir ihtiyaç fare kullanıcıları için mouseover davranışını korurken tıklama olayı.

Tam olarak orada neler olduğundan emin değilim. Öğe görüntülenmez ve kullanıcının o anda ilk kez takıldığı ve etkinliğin başlatıldığı anda eklenmiş bir olayı yoktur. Kodunuza aşağıdaki yöntemi ekleyerek

Answer 1

Dene:

function detectMobile() { 
    try { 
    document.createEvent("TouchEvent"); 
    return true; 
    } catch (e) { 
    return false;; 
    } 
} 

Bu yöntem dokunmatik olay yükseltmek deneyecek. Daha sonra kullanıcının dokunmatik etkin bir cihaz kullanıp kullanmadığını ve kodunuzu buna göre ayarlayıp ayarlamadığını belirlemek için kullanabilirsiniz.

Bu (örneğin biraz dalgalı) bir örnek için bu JSFiddle'a bakın.