Question

Javascript触摸事件是这样的：touchstart，touchend，touchmove，touchleave，touchcancel。我将手指放在div元素＆＃34;＃panel＆＃34;。

上

{{1}}

我正在使用Chrome F12开发工具来模拟触摸事件。然后我上传到服务器并试用手机浏览器（不是Chrome）。 touchstart，touchend和touchend活动都很好。但我无法填充touchleave和touchcancel。 Working DEMO.

Answer 1

来自Here is all of my AppDelegate，用户代理必须调度此event类型，以指示触摸点何时以特定于实现的方式中断，例如synchronous event或源自UA取消的操作触摸或触摸点将document window留给能够处理用户交互的non-document area。（例如，UA的本机用户界面，插件）当用户在触摸表面上放置比设备或实现被配置为存储更多的触摸点时，用户代理也可以调度该事件类型，在这种情况下，应删除Touch中最早的TouchList对象。

从我的个人实验中，在 touchcancel 中调用Chrome F12 develper tool，同时执行touchmove处理程序，启动右键单击

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

注意：另请参阅docs

对于Different ways to trigger touchcancel in mobile browsers，此event是specification早期版本中的提案，尚未实施。不要依赖它。[From MDN]

Answer 2

您可以尝试以下内容：

$(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>");
});});

或者请提供工作演示链接以便在那里查看。谢谢!!

Answer 3

这里有两点要调整。触摸事件的工作方式与鼠标事件相同（或多或少）。因此，您需要在触摸开始时将active设置为 true ，并在触摸结束/离开/取消时将其取消设置：

element.addEventListener('touchstart', function scrolling() {
       active = true;
       element.classList.add('scrolling');
});

关于您的主要问题-正如我所说的，触摸事件的工作原理或多或少是相同的。如果您记录touchmove事件，则可以看到clientX存储在 e.touches [x] .clientX 下。原因很简单-您的手指不止一个。

element.addEventListener('touchmove', function (e) {
    if (!active) return;
    var x = e.touches[0].clientX;
    x -= element.querySelector('.wrapper').getBoundingClientRect().left;
    scrollIt(x, element);
});

编辑：我发现在方向更改，窗口大小更改以及鼠标离开上下文区域时重新启动设置（在您的情况下，仅是“活动”变量）非常有用。

Javascript touchleave和touchcancel不会填充

3 个答案: