12

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

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

我遇到的问题是，除非为按住shiftkey按钮的第一根手指触发touchmove ，否则我不会收到任何点击手指的touchend事件。

因为屏幕非常敏感，所以 touchmove事件很容易触发，并且在大多数情况下一切正常。

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

你可以在这里用你的 ipad/iphone 测试它：http: //jsfiddle.net/jdeXH/8/

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

这种行为是可以预期的吗？是否有一些已知的解决方法？我原以为当手指从屏幕上移开时会立即触发 touchend 事件。

我用 iOS 5.1.1（ipad1 和 iphone4s）测试了这个

编辑：发现一个类似的问题Multitouch touchEvents not trigger as they should on Safari Mobile

4

4 回答 4

3

好吧，似乎这个错误比我更困扰一些人，他们直接向苹果提交了一个错误，几年后它现在在 iOS6 中得到修复:)

于 2012-10-23T15:48:14.987 回答
1

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

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

  • 实现一个 touchStart 事件，注册开始坐标等
  • 实现一个与 touchEnd 完全相同的 touchMove 事件，但要确保回调不会多次触发。使用在更高范围内定义的布尔标志或类似的东西。
  • 使用在更高范围中定义的相同布尔标志实现正常的 touchEnd 事件，该事件仅在 touchMove 尚未触发回调时触发。
于 2012-10-20T20:25:06.077 回答
0

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

//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].pageYindex 是屏幕上的手指， event 是触发的事件TouchStart。有了这个主题，你可以实现你自己版本的这个动作，或者使用我在这里建议的那个。

于 2012-09-13T19:37:45.933 回答
0

因此，您似乎已经遇到了无法避免的情况之一，并且只会有错误的黑客攻击。您正在创建一个尚不完全“规范”的 UI 功能，但似乎有一些承诺（我喜欢......我喜欢）。在技​​术这一点上要问自己的问题是“我怎样才能强迫用户滑动手指以保持 shift ”。

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

于 2012-10-17T02:30:12.897 回答