Das Browser-Mouseover-Ereignis für Touch-Geräte löst das falsche Klickereignis aus

Question

Ich habe ein Problem damit, wie Browser mouseover- und mouseleave-Ereignisse auf Touch-Geräten verarbeiten.

Ich habe ein Element A, das ein anderes Element B zeigt und verbirgt, wenn Sie die Maus bewegen. Element B ist eine Schaltfläche mit einem Klickereignis. Dies ist völlig in Ordnung, wenn Sie eine Maus verwenden, aber wenn Sie die Touch-Eingabe verwenden, gibt es natürlich keinen Mouseover. Browser gehen automatisch so vor, dass wenn Sie einmal auf das Element tippen, das mouseover-Ereignis ausgelöst wird und wenn Sie irgendwo anders auf dem Bildschirm tippen, wird das mouseleave-Ereignis ausgelöst (was meistens sinnvoll ist).

Jetzt ist mein Problem, dass beide Ereignisse sofort mit nur einem Tippen ausgelöst werden. Und ich kann keinen Weg finden. Es scheint keine Möglichkeit zu geben, festzustellen, ob die Eingabe von einer Maus- oder Berührungseingabe stammt.

Ich habe ein einfaches jsfiddle präsentiert das Problem zusammen: 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>

Ich brauche, dass zwei Hähne, die rote Box und zweite zeigen erste sein abzufeuern das Click-Ereignis, während das Mouseover-Verhalten für Mausbenutzer beibehalten wird.

Ich bin mir wirklich nicht sicher, was genau dort passiert. Das Element wird nicht angezeigt und hat kein Ereignis in dem Moment, in dem der Benutzer zum ersten Mal dort tippt und das Ereignis noch ausgelöst wird.

Answer 1

Versuchen Sie die folgende Methode, um Ihren Code hinzufügen:

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

Diese Methode wird versucht, ein Touch-Ereignis auslösen. Sie können es dann verwenden, um festzustellen, ob der Benutzer ein Gerät mit Berührungsfunktion verwendet, und den Code entsprechend anzupassen.

Siehe JSFiddle für ein (etwas abgehackt) Beispiel.