设备事件

# Geolocation(地理位置)

Geolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制(比如IP地址、Wifi热点、手机基站等)。下面的方法，可以检查浏览器是否支持这个接口。

if (navigator.geolocation) {
  // 支持
} else {
  // 不支持
}

## getCurrentPosition:获取当前位置

getCurrentPosition方法，用来获取用户的地理位置。使用它需要得到用户的授权，浏览器会跳出一个对话框，询问用户是否许可当前页面获取他的地理位置。必须考虑两种情况的回调函数：一种是同意授权，另一种是拒绝授权。如果用户拒绝授权，会抛出一个错误。

navigator.geolocation.getCurrentPosition(geoSuccess,geoError);

上面代码指定了处理当前地理位置的两个回调函数。

  • 用户同意授权

如果用户同意授权，就会调用geoSuccess。

function geoSuccess(event) { 
   console.log(event.coords.latitude + ', ' + event.coords.longitude);
}

geoSuccess的参数是一个event对象。event有两个属性：timestamp和coords。timestamp属性是一个时间戳，返回获得位置信息的具体时间。coords属性指向一个对象，包含了用户的位置信息，主要是以下几个值：

- coords.latitude：纬度 - coords.longitude：经度 - coords.accuracy：精度 - coords.altitude：海拔 - coords.altitudeAccuracy：海拔精度(单位：米) - coords.heading：以360度表示的方向 - coords.speed：每秒的速度(单位：米)

大多数桌面浏览器不提供上面列表的后四个值。

  • 用户拒绝授权

如果用户拒绝授权，就会调用getCurrentPosition方法指定的第二个回调函数geoError。

function geoError(event) { 
   console.log("Error code " + event.code + ". " + event.message);
}

geoError的参数也是一个event对象。event.code属性表示错误类型，有四个值：

- 0：未知错误，浏览器没有提示出错的原因，相当于常量event.UNKNOWN_ERROR。 - 1：用户拒绝授权，相当于常量event.PERMISSION_DENIED。 - 2：没有得到位置，GPS或其他定位机制无法定位，相当于常量event.POSITION_UNAVAILABLE。 - 3：超时，GPS没有在指定时间内返回结果，相当于常量event.TIMEOUT。

  • 设置定位

getCurrentPosition方法还可以接受一个对象作为第三个参数，用来设置定位行为。

var option = {
            enableHighAccuracy : true,
            timeout : Infinity,
            maximumAge : 0
        };

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);

这个参数对象有三个成员：

- enableHighAccuracy：如果设为true，就要求客户端提供更精确的位置信息，这会导致更长的定位时间和更大的耗电，默认设为false。 - Timeout：等待客户端做出回应的最大毫秒数，默认值为Infinity(无限)。 - maximumAge：客户端可以使用缓存数据的最大毫秒数。如果设为0，客户端不读取缓存；如果设为infinity，客户端只读取缓存。

## watchPosition&clearWatch:持续监听 watchPosition方法可以用来监听用户位置的持续改变，使用方法与getCurrentPosition方法一样。

var watchID = navigator.geolocation.watchPosition(geoSuccess,geoError, option);

一旦用户位置发生变化，就会调用回调函数geoSuccess。这个回调函数的事件对象，也包含timestamp和coords属性。watchPosition和getCurrentPosition方法的不同之处在于，前者返回一个表示符，后者什么都不返回。watchPosition方法返回的标识符，用于供clearWatch方法取消监听。

navigator.geolocation.clearWatch(watchID);

# Device Status:设备状态

## Battery API:电池状态 这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。现在许多移动端apps都内嵌着web浏览器包装的(不再是完全native的应用)。所以我们需要一个方法去获取系统的信息，app有一些过程是``十分耗电的，然后我们就需要在用户启动时给用户一些警告信息`告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;  

// 电池属性  
console.warn("Battery charging: ", battery.charging); // 当前电池是否在充电 true  
console.warn("Battery level: ", battery.level); // 0.58  
console.warn("Battery discharging time: ", battery.dischargingTime);  

// 添加事件监听器  
battery.addEventListener("chargingchange", function(e) {  
  console.warn("Battery charge change: ", battery.charging);  
}, false);

## Orientation API(方向检测)

Orientation API用于检测手机的摆放方向(竖放或横放)，使用下面的代码检测浏览器是否支持该API：

if (window.DeviceOrientationEvent) {
  // 支持
} else {
  // 不支持
}

一旦设备的方向发生变化，会触发deviceorientation事件，可以对该事件指定回调函数。

window.addEventListener("deviceorientation", callback);

回调函数接受一个event对象作为参数。

function callback(event){
    console.log(event.alpha);
    console.log(event.beta);
    console.log(event.gamma);
}

上面代码中，event事件对象有alpha、beta和gamma三个属性，它们分别对应手机摆放的三维倾角变化。要理解它们，就要理解手机的方向模型。当手机水平摆放时，使用三个轴标示它的空间位置：x轴代表横轴、y轴代表竖轴、z轴代表垂直轴。event对象的三个属性就对应这三根轴的旋转角度。

- alpha：表示围绕z轴的旋转，从0到360度。当设备水平摆放时，顶部指向地球的北极，alpha此时为0。 - beta：表示围绕x轴的旋转，从-180度到180度。当设备水平摆放时，beta此时为0。 - gramma：表示围绕y轴的选择，从-90到90度。当设备水平摆放时，gramma此时为0。

# User Perception:用户感知

## Vibration API:设备振动

Vibration接口用于在浏览器中发出命令，使得设备振动。显然，这个API主要针对手机，适用场合是向用户发出提示或警告，游戏中尤其会大量使用。由于振动操作很耗电，在低电量时最好取消该操作。使用下面的代码检查该接口是否可用。目前，只有Chrome和Firefox的Android平台最新版本支持它。

navigator.vibrate =
  navigator.vibrate ||
  navigator.webkitVibrate ||
  navigator.mozVibrate ||
  navigator.msVibrate;

if (navigator.vibrate) {
  // 支持
}

vibrate方法可以使得设备振动，它的参数就是振动持续的毫秒数。

navigator.vibrate(1000);

上面的代码使得设备振动1秒钟。vibrate方法还可以接受一个数组作为参数，表示振动的模式。偶数位置的数组成员表示振动的毫秒数，奇数位置的数组成员表示等待的毫秒数。

navigator.vibrate([500, 300, 100]);

上面代码表示，设备先振动500毫秒，然后等待300毫秒，再接着振动500毫秒。vibrate是一个非阻塞式的操作，即手机振动的同时，JavaScript代码继续向下运行。要停止振动，只有将0毫秒或者一个空数组传入vibrate方法。

navigator.vibrate(0);
navigator.vibrate([]);

如果要让振动一直持续，可以使用setInterval不断调用vibrate。

var vibrateInterval;

function startVibrate(duration) {
  navigator.vibrate(duration);
}

function stopVibrate() {
  if (vibrateInterval) clearInterval(vibrateInterval);
  navigator.vibrate(0);
}

function startPeristentVibrate(duration, interval) {
  vibrateInterval = setInterval(function() {
    startVibrate(duration);
  }, interval);
}

## Luminosity API(亮度调节) Luminosity API用于屏幕亮度调节，当移动设备的亮度传感器感知外部亮度发生显著变化时，会触发devicelight事件。目前，只有Firefox部署了这个API。

window.addEventListener('devicelight', function(event) {
  console.log(event.value + 'lux');
});

上面代码表示，devicelight事件的回调函数，接受一个事件对象作为参数。该对象的value属性就是亮度的流明值。这个API的一种应用是，如果亮度变强，网页可以显示黑底白字，如果亮度变弱，网页可以显示白底黑字。

window.addEventListener("devicelight", function(e) {
  var lux = e.value;

  if (lux < 50) {
    document.body.className = "dim";
  }
  if (lux >= 50 && lux <= 1000) {
    document.body.className = "normal";
  }
  if (lux > 1000) {
    document.body.className = "bright";
  }
});

CSS下一个版本的Media Query可以单独设置亮度，一旦浏览器支持，就可以用来取代Luminosity API。

@media (light-level: dim) {
  /* 暗光环境 */
}

@media (light-level: normal) {
  /* 正常光环境 */
}

@media (light-level: washed) {
  /* 明亮环境 */
}

Touch & Tap

Touch Events

从Mobile的角度来看，Touch才是最基本的事件，就像React官方库在Issue 436中所描述的，React官方只提供了onTouchStart等4个与Touch相关的事件，而推荐是采用<Tappable onTap={}>的方式包裹一层监听组件，从而避免核心库的冗余。 |

这些事件可以被附着到页面的任意元素上，并且同样可以通过Event对象传递给处理函数，可以包含触碰点的位置信息等。可以使用element.addEventListener来添加事件响应函数，譬如：

window.addEventListener(
  "load",
  function() {
    // on page load
    document.body.addEventListener(
      "touchstart",
      function(e) {
        alert(e.changedTouches[0].pageX); // alert pageX coordinate of touch point
      },
      false
    );
  },
  false
);

Tap & 300ms:Tap事件与300ms的延迟

绝大部分基于Touch的移动端浏览器都会在你轻按屏幕300ms之后再触发对应的事件，这是为了判断你是否是Double-Tapping来缩放界面。如果浏览器等待一段时间之后，你不再Tap，那么就会触发Click事件。这一设定对于响应式界面与多点触摸的界面是个很好的阈值设置，不过有时候会让用户觉得Web应用响应的如此缓慢，压根和原生应用不能比。譬如在一个纯阅读的网站中，用户并不是很关心触摸控制，只是想单纯的点个菜单然后进入具体的文章进行浏览，在这种情况下我们就要防止这300ms的延迟。 (1)在Chrome或者Firefox中禁止缩放

Android版本中的Chrome与Firefox在用户禁止缩放的情况下会自动不再等待300ms，可以在HTMLhead中进行如下设置：

<meta name="viewport" content="width=device-width, user-scalable=no">

或者

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

不过这种方式在Safar(iOS的WebView)上行不通，有时候甚至导致元素无法点击访问。 (2)Chrome版本32以上设置Viewpoint为device-width 在Chrome 32或者以上版本中，将viewpoint设置为任何小于或者等于device-width的尺寸会禁止掉缩放，譬如：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3"

(3)使用PointerEvents(IE 10+)

a, button, .myelements
{
	-ms-touch-action: manipulation;	/* IE10*/
	touch-action: manipulation;		/* IE11+ */
}

(4)自定义Touchend Event Handlers 不同于click与touchstart，touchend事件是不会延迟300ms触发的，这一点在与WebGLS或者Canvas的游戏中非常适用。不过你并不能完全依赖于touchend，有如下原因：

  • 如果用户在不同的元素上触发了touchstart与touchend事件，那么不应该触发Click事件。

  • 如果某个用户在触发了touchstart事件之后，因为有较大移动在touchend之前触发了touchmove，这个时候就不能触发Click事件。

  • 对于非手持设备同样需要处理点击事件，还需要注意不能对于同一事件触发两次

  • FastClick from FT Labs attaches appropriate listeners on mobile browsers when they’re required, i.e. solutions 2 to 4 above have not been used. The script compresses to around 10Kb.

  • Tappy! from the Filament Group is a normalized tap event library, similar in concept to PointerEvents, which compresses to 1Kb.

# Gesture Recognize Types

Multiple Touch

Drag&Drop

Scroll

Zoom

Shake

Hover

Hover on Touch

当你点住某个元素的时候会自动隐藏原本元素并且显示第二个元素。如果你在250ms之内放手那么会自动触发点击事件并且自动跳转到对应的响应。而如果你按住了更长的时间，那么触发的是Taphold事件，悬浮层就会自动显示出来，即如上图所示。 (1)Installation

<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="your/path/hoverontouch.js"></script>

(2)HTML Structure

<div class="object" data-triggerlink="https://www.example.com">
  <div class="cover">
    // Put the cover Informaton here
  </div>
  <div class="info">
    //Put the secondary Information here
  </div>
</div>
上一页
下一页

最近更新于0001-01-01