Javascript touchleave 和 touchcancel 不填充

Question

Javascript触摸事件是这样的:touchstart、touchend、touchmove、touchleave、touchcancel。我在 div 元素“#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>");
    });
});

我正在使用 Chrome F12 开发工具来模拟触摸事件。我上传到服务器并在手机浏览器(不是chrome)上尝试。 touchstart、touchend 和 touchend 事件工作正常。但我无法填充 touchleave 和 touchcancel。 Working DEMO.

Answer 1

From docs, A user agent must dispatch this event type to indicate when a touch point has been disrupted in an implementation-specific manner, such as a synchronous event or action originating from the UA canceling the touch, or the touch point leaving the document window into a non-document area which is capable of handling user interactions. (e.g. The UA's native user interface, plug-ins) A user agent may also dispatch this event type when the user places more touch points on the touch surface than the device or implementation is configured to store, in which case the earliest Touch object in the TouchList should be removed.

根据我的个人实验，在 touchmove 处理程序运行时，在Chrome F12 开发工具中调用 touchcancel，启动右键单击

在 Android 5.1 中，在调用 touchmove 处理程序时按 lock-key 或 Minimize-key。

注意:另请参阅Different ways to trigger touchcancel in mobile browsers

对于touchleave ，此事件是规范早期版本中的一项提案，尚未实现。不要依赖它。[来自 MDN]