首页多点触控登录

Question

首页多点触控登录

javascriptjqueryhtmliostouch

3

我想创建一个基于触摸的主页。例如，如果用户用5个手指触摸屏幕（如下图中的绿色圆圈），它将重定向用户到特定的主页，但如果他以其他模式触摸（红色圆圈），它将显示“登录失败，请重试”警报。只要用户触摸在正方形内部，无论在哪里触摸都没关系。

主要思路是确定用户手指的位置并将其重定向到另一个页面，登录是一个示例。

是否有一种使用HTML和JavaScript的方法来做到这一点，因为我希望它成为iOS主页？

- iEmad

纯HTML + JS没有任何意义，因为JS是未编译的，任何人都可以从您的代码中读取正确的密码。 - Christian Schnorr

重点是确定触摸以将用户重定向到特定的主页...上面的图片只是使用示例...但还是谢谢。 - iEmad

我知道，但如果你想在客户端检查这个，你需要在 .js 中硬编码你的密码/触摸位置，这对所有人都是可见的。 - Christian Schnorr

我理解目前安全性会比较弱，但暂时并不是非常重要。因为我只是将其用于页面重定向。 - iEmad

1

为什么你到底需要密码？ - Christian Schnorr

这不是密码，但我想使用不同的模式将用户带到不同的主页（而不是点击链接）。 - iEmad

5个回答

2

您需要绑定要让用户触摸的元素的触摸事件。这些事件是touchstart、touchmove和touchend（以及touchcancel）。在事件中，手指位置的坐标以数组形式给出（实际上是三个——请参见底部链接，了解哪个或哪些数组适用于哪些事件/场景）。然后，您可以使用这些坐标来计算形状。

以下是使用jquery的双手指示例（不是必需的）。

#JQuery
$('#myID').bind("touchstart", function(event) {
  var finger1PosX = event.originalEvent.targetTouches[0].pageX;
  var finger2PosX = event.originalEvent.targetTouches[1].pageX;
});

这里假设至少有两个手指按下，这是一个不好的假设。

以下是一篇很好的教程/讨论: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/ 你可能还想使用event.preventDefault来防止在此div中滚动和其他手势。

另外请注意，安卓上对多点触控事件的支持在不同版本之间有所不同（我知道你在问ios）。

- Ed Kirk

谢谢！这个教程正是我在寻找的。 - iEmad

2

jGestures会让你朝着正确的方向前进。

- ilanco

这是一个非常有用的插件，但需要一些定制。感谢您的帮助。 - iEmad

0

我建议创建一个隐藏的表格，这也将为您提供处理Torrance错误的方法。

如果您查看http://www.html5rocks.com/en/mobile/touch/和启用触摸的应用程序部分，这可能会帮助您监视多点触控事件。

我会得到一个网格，其中将有许多单元格。（更多的单元格将=更难破解密码，但也更容易使用户登录变得困难！）

然后，如果您有一个10x10的网格...（其中1 =用户的触摸）

你可以计算一下1之间的关系，看看是否匹配

- Steve

但是当用户看不到表格时，他很可能会触摸/靠近边框 - 那该如何处理？ - Bergi

我同意Bergi的观点。但是感谢这个网站，它看起来很有用，我可以借鉴一些代码。 - iEmad

0

你可以获取触摸数组（在您的情况下为5个），每个都有其坐标。从那里开始，只需将坐标与循环中的框的坐标进行比较，就可以确定您想要的内容了。在这里查看一些教程http://seb.ly/2011/04/multi-touch-game-controller-in-javascripthtml5-for-ipad/ 或在谷歌上找到其他数百个。

- Gavriel

谢谢你的想法..我不知道的是如何分析用户触摸屏幕的哪个部分，以及他/她是否用五根手指触摸了屏幕.. 在我做到这一点之后，我就可以开始使用你的想法了。 - iEmad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bergi · Accepted Answer

不，对于密码保护的页面，您还需要服务器端处理。

您的HTML页面将包括一个（不可见的）表单，该表单将从触摸事件处理程序中更新坐标。然后，在一定时间内或满足条件（例如：注册了5个坐标）时，您将提交表单。随后，您也可以将其转换为AJAX服务，但没有区别。

然后，服务器应用程序将需要分析触摸模式，并发送失败消息或成功通知与登录cookie。