问题标签 [touchstart]

我正在开发一个必须在各种设备上运行的移动网站。目前让我头疼的是黑莓。

我们需要同时支持键盘点击和触摸事件。

理想情况下，我会使用：

但我们遇到的问题是，其中一些黑莓设备从触摸到触发点击之间存在非常烦人的延迟。

补救措施是改用 touchstart：

但是我如何去绑定两个事件，但只触发一个？我仍然需要键盘设备的点击事件，但当然，如果我使用的是触摸设备，我不希望触发点击事件。

一个额外的问题：有没有办法做到这一点，并额外适应甚至没有触摸启动事件的浏览器？在对此进行研究时，看起来 BlackBerry OS5 不支持 touchstart，因此还需要依赖该浏览器的点击事件。

附录：

也许更全面的问题是：

使用 jQuery，是否可以/推荐使用相同的绑定处理触摸交互和鼠标交互？

理想情况下，答案是肯定的。如果没有，我确实有一些选择：

1. 我们使用 WURFL 来获取设备信息，因此可以创建我们自己的设备矩阵。根据设备，我们将使用 touchstart 或 click。

2. 通过 JS 检测浏览器中的触摸支持（我需要对此进行更多研究，但似乎这是可行的）。

但是，这仍然存在一个问题：支持 BOTH 的设备怎么样。我们支持的一些手机（即诺基亚和黑莓）既有触摸屏又有键盘。所以那种让我回到原来的问题……有没有办法以某种方式同时允许两者？

我遇到了 jQuery 1.6.4、iOS 5 和 touchstart/touchend 事件的注册问题（如标题中所述，显然）。

采取以下代码：

“纯 JS”按钮在 iOS 4.3 和 iOS 5 中显示警报，但“jQuery”按钮仅适用于 iOS 4.3。在 iPad/iPhone 模拟器 4.3 和 5 上测试；还在真机 iPhone 4.3、iPhone 5.0 和 iPad 5.0 上进行了测试。如果我使用 a<input type="button">甚至是简单<a>的而不是a ，也会有同样的反应<button>。

我相信这是与 jQuery 相关的问题吗？

我正在尝试使用 JavaScript 和 jQuery 来捕获触摸事件。但我在 Android 2.3.2 上的 Web 浏览器中看到了一些非常奇怪的行为：每当我点击屏幕，然后快速点击屏幕上的其他位置时，浏览器：

• 瞬间显示橙色边框并在整个屏幕上突出显示，并且
• 向我发送错误的事件。

橙色边框似乎只是同一个潜在问题的相关症状，所以我并不太担心——它实际上可以方便地判断浏览器何时搞砸了。我真正想知道的是，我怎样才能始终如一地获得两次快速点击的正确触摸事件？我相信当这个问题解决后，橙色边框也会消失。

以下是我迄今为止制定的所有痛苦细节。

这是一个显示问题的页面，并显示了许多有关接收到的每个事件的详细信息和时间的诊断信息。如果您在蓝色矩形内点击，您肯定会收到橙色闪光/不良事件，然后在黑色矩形内快速点击。

我的 jQuery 代码非常标准。函数的log实现并不重要；问题是浏览器没有在它应该调用它的时候调用它。

关于我最初描述的现象的更多细节：

橙色边框和高亮：这与单击超链接时浏览器围绕超链接绘制的橙色边框和高亮相同。但是页面上没有超链接，并且浏览器在整个屏幕周围绘制了这个橙色边框——或者更具体地说，在<div id="battle">我通过 jQuery 挂钩事件的外部周围。

错误的事件：在我的touchstart事件处理程序中，我调用event.preventDefault(), 告诉浏览器不要滚动，不要合成鼠标事件等。因此，我希望只获取touchstart和touchend事件。我这样做了，第一次点击。但是，第二次点击时，我得到的不是touchstart/ ，而是触摸事件、合成鼠标事件的所有组合，以及第二次点击的偶然事件，甚至是第一次点击的重复事件。详情如下。touchendtouchcancel

这种行为也只发生在非常特殊的情况下：

• 第一个抽头必须很短（小于~200ms）。
• 此后第二次轻敲必须很快到来（在第一次轻敲之后小于~450ms touchstart）。
• 第二个抽头必须距离第一个抽头至少 150 像素（从第一个抽头的坐标沿对角线测量touchstart）。
• 如果我删除了挂钩mousedown和mouseup的代码，橙色矩形将不再出现。但是，触摸事件有时仍然会出现乱码。

至于我所说的事件被乱码的意思，这就是我所看到的。当我写“1：”时，这意味着事件是针对第一个点击的坐标；“2:”表示第二次点击的坐标。我看到了以下事件模式（百分比表示每个事件在 100 次试验后出现的次数）：

• (50%) 1:touchstart 1:touchend 1:mousedown 1:mouseup (短延迟) 2:mousedown 2:mouseup
• (35%) 1:touchstart 1:touchend 2:touchstart 1:mousedown 1:mouseup 2:touchend
• (10%) 1:touchstart 1:touchend 2:touchstart 1:mousedown 1:mouseup 2:touchcancel (短延迟) 2:mousedown 2:mouseup
• (3%) 1:touchstart 1:touchend 2:touchstart 2:touchend (短延迟) 1:mousedown 1:mouseup
• (2%) 1:touchstart 1:touchend 1:mousedown 1:mouseup （第二次点击什么也没有）

某些事件组合似乎更频繁地出现，具体取决于我点击的速度，但我还没有完全确定模式。（在上面的第二项下似乎更有可能出现两次快速、清脆的敲击声，而不太强调脆度的更快速的方法似乎更有可能是第一项。但我还没有确定导致领先的具体时间数字到每个人。）类似地，上面指出的“短延迟”可以是〜150ms到〜400ms的任何地方；我也没有对整个模式进行逆向工程。

如果我不钩mousedownand mouseup，分布大致是这样的：

• (40%) 1:touchstart 1:touchend 2:touchstart 2:touchcancel
• (35%) 1:touchstart 1:touchend 2:touchstart 2:touchend （实际期望的行为）
• (25%) 1:touchstart 1:touchend （第二次点击什么都没有）

因此，如果我不挂钩鼠标事件，它会在三分之一的时间内起作用；如果我愿意假装这touchcancel意味着与 相同的东西touchend，我可以得到高达 75% 的时间。但这仍然很糟糕。

我已经尝试过的替代方案：

• 我尝试过使用jQuery Mobile和events vmousedown，vmouseup但它们并不总是在第二次点击时触发，我怀疑是因为同样的潜在事件怪异。
• 我可以完全忘记触摸事件，只使用合成的鼠标事件，但是在物理点击和合成鼠标事件的传递之间通常有大约半秒的延迟，而触摸事件是即时的，所以我可以更快地响应. 我还想防止滚动——这是针对全屏游戏的，我不希望用户不小心将地址栏滚动回视图并阻止游戏的一部分——并且preventDefault通常touchstart可以实现这一点（尽管偶尔尽管我的第二个水龙头实际上能够滚动屏幕preventDefault......我想解决整个事件混乱的另一个原因）。
• 我尝试过第三方 Web 浏览器 ( Dolphin )，但它与事件有同样的问题。所以我猜这可能是底层 WebView 将事件传递给脚本的方式存在问题。

任何人都可以建议一种方法来更改我的 HTML、我的事件处理程序或其他任何东西，以便连续两次快速点击可靠地获取触摸事件？

我目前正在我的设备（三星 Galaxy S2）上为我的游戏测试 touchstart 功能。我正在使用包装在android中phonegap下的javascript和jquery进行编程，目前存在以下问题：

• 我的触摸启动事件（例如触发攻击按钮“touchstart”事件以运行一些 javascript 来执行攻击操作）导致我的屏幕暂时变得模糊，然后在不到一秒的时间内恢复正常，所以更像是屏幕闪烁图像变得紧张）。我没有使用 css 转换或转换，只是简单的 css 和图像。

有人可以让我知道他们是否遇到过与我类似的问题。有点不知所措，无论是硬件还是触摸启动问题，我都可以解决该问题。

下面的示例 Javascript 用于我的导航控件（左、上、下、右 touchstart 点击）：

如果您认为上述脚本有任何问题，请告诉我。我添加 touchstart 事件的方式在脚本的其他区域中是相同的，例如在发起攻击或启动选项菜单时。

我有一个问题一直困扰着我好几个小时。我有以下html：

我应用了以下 CSS：

我检查了继承，看不到任何问题。除了 iPad 和 iPhone 上的 Safari 之外，这段代码在我测试过的所有浏览器上都能正常显示（我可以点击它们，它会询问我是否要打电话），但是文本是白色的！我玩过，更改了 DIV Id 以确保我没有交叉样式，将跨度更改为color各种类型，没有任何改变。

有没有其他人有这个问题？

（我正在使用带有 Jquery 的 touchstart 事件，该事件在<a>单击 an 时显示和隐藏此 DIV。我提到这一点是因为它可能会导致问题，尽管我看不出如何。）

我想计算touchstart的初始值和touchmove上的实际值之间的距离。

举个例子 ：

我触摸屏幕：startX = 100; 然后，我在屏幕上移动手指：moveX = 150;

startX 和 moveX 的距离为 (moveX - startX) = 50；

代码更新：

我正在创建一个 Android 应用程序并有 2 个按钮。1个开始和1个停止。单击开始按钮后，停止按钮开始可见，然后停止按钮变为可见并开始不可见。

我试图在 STOP 按钮上获得一个 touchstart 事件（也可以添加到开始按钮，但不是必需的）。但是，由于某种原因，我的以下代码无法正常工作。有些人可以让我知道我错过了什么。

背景： - 使用 jquery 隐藏我的按钮 - 带有背景图像的按钮

JAVASCRIPT：

HTML 按钮：

我正在一个Android应用程序中工作Titanium。我的问题是如何在 Titanium 中实现长触摸？我需要这样的东西：当用户按住某个视图来调用某个函数时。我试过这个：

但这不像我想要的那样工作。每次单击视图时都会调用我的函数 clickTheView(e) ，当我长时间触摸视图时不会调用它。

欢迎任何想法。提前致谢。

我在 Backbone 中有以下模板，一切都完美呈现。

但是，如果我编写以下内容，则不会触发 touchstart：

有用。好像 jQuery 无法绑定事件。可能是什么问题？

您好我正在尝试在移动 Safari 的移动 Web 应用程序中模拟悬停事件。基本上我有我的 asp.net 按钮：

现在使用 javasrcipt 我必须能够读取触摸开始和触摸结束事件：

然后我有这个 CSS 类，它正在与btn-sign-up切换：

由于某种原因，课程没有改变......我的代码是错误的还是我的逻辑不好？