触摸手势 检测上滑_检测和控制网页上的触摸事件

触摸手势 检测上滑

There are legions of faceless hardware and software developers who are owed a debt of gratitude for accomplishing what appears, at first glance, to be a simple transition: equating mouse interactions to touch controls.

许多不露面的硬件和软件开发人员都为完成乍一看似乎很简单的过渡而感激不已：将鼠标交互等同于触摸控件。

The fact that that this transition works so seamlessly is little short of a miracle, allowing interaction models like CSS 3D Origami to respond equally well to fingertip touches or a moving cursor, with no extra coding required.

这种过渡如此无缝地进行的事实不容错过一个奇迹，它使诸如CSS 3D Origami之类的交互模型能够对指尖触摸或移动的光标做出同样良好的响应，而无需额外的编码。

However, developers cannot cover every eventuality. Inevitably there are situations where a CSS :hover does not translate to touch in the way that you expect or want. In those cases, you will either have to reconsider the interaction model, or code the UI to make it touch-appropriate.

但是，开发人员无法涵盖所有​​可能的情况。 不可避免地，在某些情况下CSS :hover不会以您期望或想要的方式转换为触摸。 在这些情况下，您将不得不重新考虑交互模型，或者对UI进行编码以使其适合触摸。

涵盖基础 (Covering The Basics)

In the current deluge of mobile devices, screen width does not indicate that a device has touch capabilities. However, a narrow viewport should motivate a few considerations:

在当前的移动设备泛滥中， 屏幕宽度并不表示设备具有触摸功能 。 但是，狭窄的视口应该激发一些注意事项：

• Ensure that UI “hit areas” are at least 50px × 50px in size. Small UI elements are difficult to touch accurately.

  确保UI“点击区域”的大小至少为50px×50px 。 较小的UI元素很难准确触摸。

• One thumb, one eye. Many visitors will be using your website while moving, distracted, and with only one digit. Ensure that important controls can be reached on the screen with just a thumb.

  一只拇指，一只眼睛 。 许多访客会在移动，分散注意力和只有一位数字的情况下使用您的网站。 确保仅用拇指即可在屏幕上到达重要控件。

• Some delays are difficult to avoid. Right now most mobile platforms have a built-in 300ms latency for web touch events. That ⅓ second delay can really add up for your users. I’ll discuss solutions to this issue in an upcoming article: for now, understand that your UI will not feel as “snappy” on a mobile device for this reason. Reducing or eliminating any transition delays for mobile users is an obvious first step to compensate for this.

  有些延误很难避免。 目前，大多数移动平台都内置了300毫秒的网络触摸事件延迟。 那＆frac13; 第二延迟确实可以为您的用户加起来。 我将在下一篇文章中讨论此问题的解决方案：到目前为止，请了解由于这个原因，您的UI在移动设备上不会显得“贪婪”。 减少或消除移动用户的任何过渡延迟显然是对此进行补偿的第一步。

确定设备是否具有可触摸性 (Determining If A Device Has Touchability)

Accurately detecting touch capability on a device has been made more difficult by IE 10, which erroneously reports touch capabilities even on devices that don’t physically support such actions. The most efficient code I’m aware is the following:

IE 10使准确检测设备上的触摸功能变得更加困难，因为IE 10错误地报告了触摸功能，即使在不实际支持此类动作的设备上也是如此。 我知道的最有效的代码如下：

function is_touch_device() {
	return !!('ontouchstart' in window)
		|| !!('onmsgesturechange' in window);
};

As a function, you can call it almost anywhere in your code:

作为功​​能，您几乎可以在代码中的任何地方调用它：

$(document).ready(function() {
	if (is_touch_device()) { 
		// do specific stuff for devices that support touch
	}
})

管理触摸事件 (Managing Touch Events)

A touch event will fire several actions, depending on context and platform:

触摸事件将触发多种操作，具体取决于上下文和平台：

touchstart  → mouseneter → mousedown  → click → mouseup → mouseleave → touchend

touchstart→mouseneter→mousedown→单击→mouseup→mouseleave→touchend

The presence and order of the inner actions differ from one platform to the next, and any one of them may mistranslate your :hover or :focus CSS. To cancel the actions entirely, unbind them from elements using JQuery:

内部动作的存在和顺序在一个平台与另一个平台之间是不同的，并且其中任何一个都可能会误翻译您的:hover或:focus CSS。 要完全取消操作，请使用JQuery将其与元素解除绑定：

$('span.hitmonkey').unbind('mousenter mouseleave touchend touchstart');

In most cases, you don’t need to unbind every action. Instead, you would test to determine which actions are causing issues on particular elements, and unbind those specifically:

在大多数情况下，您无需取消所有操作的绑定。 相反，您将进行测试以确定哪些操作会导致特定元素出现问题，并明确取消绑定这些元素：

$('span.hitmonkey').unbind('touchstart');

This needs to be done carefully, considering the growing number of hybrid devices that offer touch and mouse input: as developers, we cannot anticipate what form an interaction will take. Anything that we unbind should immediately be bound to a solution:

考虑到越来越多的提供触摸和鼠标输入的混合设备，需要谨慎进行此操作：作为开发人员，我们无法预期交互将采取何种形式。 我们解除绑定的任何内容都应立即绑定到解决方案：

$('span.hitmonkey').bind('touchstart', function() {
	// specific touch-start activity for element, controlled by JavaScript
});

The number of possible solutions is manifold, and impossible to cover in any depth here; I’ll demonstrate specific examples in the next article.

可能的解决方案数量众多，这里不可能涵盖任何深度。 我将在下一篇文章中演示具体示例。

很多暴躁的费用？ 没有复制-复制。 (Lots of Touchy-Feely? No Copy-Copy.)

If you expect a UI element to receive lots of touch interaction, especially in rapid succession, it’s probably a good idea to disable default double-tap actions. These may include copy (for images), define (for text) or zoom, any one of which will interrupt your user’s experience of the page.

如果您希望UI元素能够收到大量的触摸交互，尤其是在快速连续的交互中，则最好禁用默认的双击操作。 这些可能包括复制(用于图像)，定义(用于文本)或缩放，其中任何一种都会打断用户对页面的体验。

span.hitmonkey {
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

Note that this doesn’t cover every mobile browser: you can’t currently control Firefox Mobile or the stock Android browser in regards to double-tap actions.

请注意，这并不涵盖所有的移动浏览器：就双击动作而言，您目前无法控制Firefox Mobile或现有的Android浏览器。

完全禁用缩放怎么办？ (What About Disabling Zoom Entirely?)

It’s possible to disable the user’s ability to zoom the page:

可以禁用用户缩放页面的功能：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Optionally, you can also add the following, for devices that do not yet support viewport:

(可选)您还可以为尚不支持viewport设备添加以下内容：

<meta name="HandheldFriendly" content="true">

Be aware that disabling zoom is generally ill-advised: among other things, zoom allows those with poor eyesight to read your page.

请注意， 禁用缩放通常是不明智的 ：除其他事项外，缩放会使视力不好的人阅读您的页面。

结论 (Conclusion)

In general, software translation of hover and click events to touch works surprisingly well. When it doesn’t, solutions are at hand. Physical testing is very important: emulators will not give you the entire experience, necessitating access to a range of devices (and ideally, a device testing lab).

通常，悬停和单击事件以进行触摸的软件翻译效果非常好。 如果没有，解决方案就在眼前。 物理测试非常重要：仿真器不会为您提供完整的体验，因此需要访问一系列设备(理想情况下，设备测试实验室)。

翻译自: https://thenewcode.com/732/Detecting-And-Controlling-Touch-Events-On-Web-Pages

触摸手势 检测上滑