Javascript 多次触碰：仅当触碰移动发生时触发触碰结束事件

我想在我的javascript应用程序从ios设备（或者android以后）访问时添加一些多点触控功能

我想提供一个类似shiftkey的功能：用户可以用一个手指按住屏幕上的按钮，当按下此按钮时，屏幕其余部分的点击行为与传统的点击行为略有不同

我遇到的问题是，我没有收到轻敲手指的任何touchend事件，除非按住Shift键的第一个手指触发了touchmove

由于屏幕非常敏感，touchmove事件很容易触发，在大多数情况下一切正常

但是，当用户的手指有点太静止时，在用户稍微移动手指之前，不会检测到敲击。 这会在轻敲和屏幕上发生的动作之间产生可变的“延迟”（如果用户非常平静，延迟可能会变化并持续几秒钟）。 我的猜测是，这个延迟将导致用户再次点击，从而触发第二次操作，这是我不想要的

您可以在此处使用ipad/iphone进行测试：

试着让身体保持绿色几秒钟，保持手指静止在青色div上，同时轻敲红色div

这种行为是意料之中的吗？ 是否有一些已知的解决问题的方法？ 我本以为当手指从屏幕上取下时，touchend事件会立即触发

我用iOS 5.1.1（ipad1和iphone4s）对此进行了测试

---

编辑：发现了一个类似的问题

好的，我已经实现了这个解决方案，它看起来很有效

//Initialize the tap touch
function ManageTapTouch() {
    this.__enabled__ = false;
}

ManageTapTouch.prototype.init = function(){
    $("#hold").bind('touchstart', $.proxy(this.__enable__, this));
    $('#hold').bind('touchend', $.proxy(this.__disable__, this));
    $('#tap').bind('touchstart',  $.proxy(this.__changeColorOnHold__, this));
    $('#tap').bind('touchend',  $.proxy(this.__changeColorOnOut__, this));
};
ManageTapTouch.prototype.__enable__ = function(event) {
    this.__enabled__ = true;
};
ManageTapTouch.prototype.__disable__ = function(event) {
    this.__enabled__ = false;
    $('body').css('background-color', 'blue'); 
};
ManageTapTouch.prototype.__changeColorOnHold__ = function(event) {
    if (this.__enabled__){
        $('body').css('background-color', 'black');
    }
};
ManageTapTouch.prototype.__changeColorOnOut__ = function(event) {
    $('body').css('background-color', 'blue');
};

new ManageTapTouch().init();

您可以在此处看到它正在运行：

---

您还可以在iPhone上尝试另一种使用多点触摸的方式：

event.originalEvent.touchs[0].pageX

和

event.originalEvent.touchs[0].pageY

其中食指是屏幕上的手指，事件是在

touchtstart

上触发的事件。有了这些主题，您可以实现自己版本的此操作，也可以使用我在这里提出的操作。

因此，您似乎已经达到了无法避免的场景之一，并且只会出现bug攻击。您正在创建一个UI功能，它还不是“标准”，但似乎有一些希望（我喜欢…我喜欢）。在技术发展的这一点上，你要问自己的问题是“我怎样才能强迫用户滑动手指来按住shift键？”

---

在一个好的设计师的帮助下，我认为你可以创建一个滑动切换按钮类似于。。。用户必须按住此按钮才能打开开关。松开后，开关将弹回“关闭”位置。我提到设计师是因为按钮需要看起来像它的行为。也许有些评论会有创意

好吧，这真让人头疼。是的，有两个已知的问题。首先，Safari有时并不介意触发touchEnd事件，除非某个地方有touchMove，即使touchMove实际上没有什么作用

其次，Chrome Mobile也是一种可爱的体验，在许多Android设备上，无论你做什么，touchEnd事件都不会触发。根据我的经验：

• 实施一个touchStart事件，该事件记录开始坐标等
• Implmenet一个touchMove事件，它与touchEnd执行完全相同的操作，但确保回调不会触发多次。使用在更高范围内定义的布尔标志或类似的内容
• 使用在更高范围内定义的相同布尔标志，实现正常的touchEnd事件，该事件仅在touchMove尚未触发回调时才会触发

---

好吧，看来这个bug很麻烦，他们直接向苹果提交了一个bug，几年后它现在在iOS6中得到了修复：）

这里似乎有一个类似的问题：好问题。我希望有人能回答这个问题。我在iPhone4和iPad3上也遇到了同样的情况。对于我自己的项目，我将事件侦听器附加到单个包含元素。这（也许只是在我的想象中？）似乎稍微提高了性能，但问题确实存在，而且似乎很零星：@pho79，是的，我同意你的版本在大多数情况下感觉稍微有点响应，但遗憾的是，它仍然不完美。很难相信人们在网络应用程序上使用多点触控技术还不够，以至于已经遇到了这个问题。@zaf不，我找不到解决的方法，所以我现在只是修改了我的应用程序设计。我仍然对有人可能知道的任何想法感兴趣。。。如果这个问题没有可行的解决方案，那么在响应性网络应用程序中使用真正的多点触控对我来说真的是毫无意义的。@dridri是的，我刚刚花了将近一整天的时间试着调试它。一个真正的皮塔。是时候改变设计了……很抱歉，我看不出你的答案是如何解决问题的，代码基本上也在做同样的事情，当我把手指从屏幕上移开时，我仍然会遇到一些“滞后”。。我有什么遗漏吗？你在试验什么样的滞后？到底是什么不起作用？你的设备是什么？我尝试在Chrome浏览器（Android 4.0）和iPhone上使用HTC Desire S，但一切都正常！touchEnd总是被调用，我不知道它在其他设备上的行为，因为我只对这个javascript应用程序的ios设备感兴趣。当然，touchend总是被调用，但不一定是立即调用的，也就是说，只有在触发另一个事件（通常是touchmove）之后才调用。这会导致从屏幕上实际移除手指和触发触摸端之间的“滞后”。在您的演示中，它会使背景保持黑色，即使在移除触摸红色div的手指之后也是如此。事实上，它会一直保持黑色，直到你移动（轻微）/移除接触青色分区的第一个手指。好的，我检查了它。你的问题是r