Question

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

我想提供一个类似 shiftkey的功能：用户可以用一根手指按住屏幕上的按钮，按下此按钮时，其余部分的轻击动作的行为屏幕与经典水龙头略有不同。

我遇到的问题是我没有收到任何 touchend 事件用于敲击手指，除非针对持有 touchmove > shiftkey 按钮。

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

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

您可以使用ipad / iphone进行测试：http://jsfiddle.net/jdeXH/8/

在点击红色div时，将手指静止地放在青色div上，尝试让身体保持绿色几秒钟。

这种行为是期待的吗？这个问题有一些已知的解决方法吗？当手指从屏幕上移开时，我原本预计会触发touchend事件。

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

编辑：发现了类似的问题Multitouch touchEvents not triggered as they should on Safari Mobile

Answer 1

好吧，看起来这个错误困扰了some people more than me，他们直接向苹果提出了一个错误，几年后它现在已经在iOS6中修复了：）

Answer 2

好的，这很头疼。是的，有两个已知问题。首先，Safari有时不会触发触发touchEnd事件，除非touchMove在某处，即使touchMove没有真正做太多。

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

实施一个注册起始坐标等的touchStart事件
Implmenet一个touchMove事件，它与touchEnd完全相同，但确保回调不会多次触发。使用在更高范围内定义的布尔标志或类似的东西。
实现普通的touchEnd事件，该事件只应在touchMove尚未触发回调的情况下触发，使用更高范围内定义的相同布尔标志。

Answer 3

好的，我已经实施了这个解决方案，似乎有效。

//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();

您可以在此处看到它：http://jsfiddle.net/Tb6t6/15/

此外，您可以使用多点触控在iPhone上尝试其他方式：event.originalEvent.touches[0].pageX和event.originalEvent.touches[0].pageY，其中索引是屏幕上的手指，事件是TouchStart上触发的事件。有了这个主题，您可以实现自己的此操作版本，或使用我在此提议的那个。

Answer 4

所以看起来你已经达到了其中一个无法避免的场景，而且只会遇到错误的黑客攻击。你正在创建一个不太“常态”的UI功能，但似乎有一些承诺（我喜欢......我喜欢）。在技术的这一点上问自己的问题是“我如何强迫用户滑动手指以保持移位”。

在优秀的设计师的帮助下，我认为您可以创建一个类似于flip switch的滑动切换按钮...用户必须拖动并按住才能将开关“打开”。释放后，开关将弹回“关闭”位置。我提到一个设计师，因为按钮需要看起来像它的行为。也许有些评论可以发挥创意。

多次触摸：touchend事件仅在发生touchmove时触发

4 个答案: