Javascript Touchleave und Touchcancel füllt nicht

Question

Javascript Touch-Ereignisse sind wie folgt: Touchstart, Touchend, Touchmove, Touchleave, Touchcancel. Ich bewege meine Finger auf div Element "#panel".

$(document).ready(function(){ 

    $("#panel").on('touchstart', function(e){ 
     e.preventDefault(); 

     $("#start-message").append("<p>Touch started</p>"); 
    }); 

    $("#panel").on('touchend', function(e){ 
     e.preventDefault(); 

     $("#end-message").append("<p>Touch end</p>"); 
    }); 

    $("#panel").on('touchmove', function(e){ 
     e.preventDefault(); 

     $("#move-message").append("<p>Touch moving...</p>"); 
    });  

    $("#panel").on('touchleave', function(e){ 
     e.preventDefault(); 

     $("#leave-message").append("<p>Touch leaved.</p>"); 
    }); 

    $("#panel").on('touchcancel', function(e){ 
     e.preventDefault(); 

     $("#cancel-message").append("<p>Touch cancelled.</p>"); 
    }); 
}); 

I Chrome F12 Develper Werkzeug bin mit Touch-Ereignisse zu simulieren. Und ich lade auf den Server und versuche Handy-Browser (nicht Chrom). Touchstart, Touchend und Touchend Events funktionieren einwandfrei. Aber ich konnte nicht Touchleave und Touchcancel bevölkern. Working DEMO.

Answer 1

Sie können wie unten etwas versuchen:

$(document).ready(function(){ 

$(document).on('touchstart',"#panel", function(e){ 
    e.preventDefault(); 

    $("#start-message").append("<p>Touch started</p>"); 
}); 

$(document).on('touchend',"#panel", function(e){ 
    e.preventDefault(); 

    $("#end-message").append("<p>Touch end</p>"); 
}); 

$(document).on('touchmove',"#panel", function(e){ 
    e.preventDefault(); 

    $("#move-message").append("<p>Touch moving...</p>"); 
});  

$(document).on('touchleave',"#panel", function(e){ 
    e.preventDefault(); 

    $("#leave-message").append("<p>Touch leaved.</p>"); 
}); 

$(document).on('touchcancel',"#panel", function(e){ 
    e.preventDefault(); 

    $("#cancel-message").append("<p>Touch cancelled.</p>"); 
});}); 

Oder Sie bitte die Arbeits Demo Link zur Überprüfung dort zur Verfügung stellen. Vielen Dank !!

Answer 2

Von docs, Ein Benutzerprogramm muss Versand diesen event Typen, um anzuzeigen, wenn ein Berührungspunkt in einer implementierungsspezifischen Weise, wie ein synchronous event oder Aktion ausgehend von den UA Aufheben der Berührung gestört worden ist, oder der Berührungspunkt verlässt die document window in eine non-document area, die Benutzerinteraktionen handhaben kann. (z. B. die native Benutzerschnittstelle der UA, Plug-ins) Ein Benutzeragent kann diesen Ereignistyp auch versenden, wenn der Benutzer mehr Berührungspunkte auf der Berührungsoberfläche platziert, als das Gerät oder die Implementierung zum Speichern konfiguriert ist. In diesem Fall das früheste Touch Objekt in Die TouchList sollte entfernt werden.

Aus meiner persönlichen Experimenten, rufen touchcancel in Chrome F12 develper tool, während touchmove Handler in Aktion initiieren Rechts

In Android 5.1, Presse lock-key oder Minimize-key während touchmove Handler wird aufgerufen Klick .

Hinweis: Auch Different ways to trigger touchcancel in mobile browsers

Für touchleave beziehen, Diese event war ein Vorschlag in einer frühen Version der specification und nicht implementiert wurde. Verlassen Sie sich nicht darauf. [From MDN]