移動端事件

移動端基礎事件

移動端事件雖然少，可是卻能夠利用它們來完成不少效果

• touchstart 手指按下事件，相似mousedown
• touchmove 手指移動事件，相似mousemove
• touchend 手指擡起事件，相似mouseup

注意：移動端事件最好仍是使用addEventListener來添加。

移動端事件與PC端事件的區別

觸發點的不一樣

• PC端

  • mousemove 必須在被添加該事件的元素上，不須要鼠標按下就能夠觸發。
  • mouseup 必須在被添加該事件的元素上擡起，擡起時才能觸發。

• 移動端

  • touchmove 按下時，必須在被添加該事件的元素上，可是按下後，即便不在該元素上，也能觸發。
  • touchend 即便不在被添加該事件的元素上，擡起時，也能觸發。

觸發順序不一樣

無論添加的順序如何，事件的觸發順序遵循以下。

• touchstart -> touchend -> mousedown -> click -> mouseup

並且 PC 端事件在移動端約有 300ms的延遲，是爲了解決雙擊纔會有這個延遲，若是沒有延遲，那麼雙擊連接時，至關於直接單機跳轉。

touchstart和click的區別

touchstart是隻要手指觸碰到元素，就會觸發，而click必須是觸碰了以後手指擡起才能觸發。

移動端事件問題

事件點透

出現事件點透的條件以下

1. 有兩層重疊元素
2. 上面的元素帶有touch事件，下面的元素帶有click事件
3. 上層的元素點擊後點擊後須要display:none

當知足上面的條件的時候，因爲click事件會有延遲，而touch事件會立馬觸發，因此當點擊了上面的元素的時候，會觸發下面元素的click事件，這就是事件點透

解決方案

1. 下面的元素不要添加click事件，並且不要使用默認帶有click事件的元素，如a、input等
2. 把上面的事件也換成click事件，這樣就不會當即觸發，都會有延遲，下面的事件就不會觸發了
3. 在上層元素的事件中經過event.preventDefault()取消事件的默認動做

取消事件默認動做的做用

每每在實際開發當中，咱們不會使用系統提供的一些效果，而是本身經過事件來封裝想要的效果，如滑屏等。

因此能夠取消根元素的一些默認動做，可是因爲在根結點上面阻止默認動做可能會存在一些問題，因此能夠把代碼放到一個容器中，而後取消這個容器的全部默認動做。代碼以下：

const box=document.querySelector('div');
box.addEventListener('touchstart或者touchmove',ev=>{
    ev.preventDefault();    //取消事件的默認動做
});

對於touchstart和touchmove取消它們的默認動做，分別又有不一樣的效果

1. touchstart

   • 阻止瀏覽器的滾動條
   • 阻止用戶雙指縮放

2. touchmove

   • 解決ios10+及部分安卓經過設置viewport禁止用戶縮放的功能
   • 解決事件點透問題
   • 阻止圖片文字被選中問題
   • 阻止了長按元素會彈出系統菜單
   • 阻止了瀏覽器回彈效果
   • 阻止了瀏覽器的滾動條
   • 阻止了鼠標的事件
   • 阻止了input框的輸入功能

事件對象

固然和PC端同樣，移動端事件也有本身的事件對象，重要的幾個屬性以下

• touches： 被添加事件元素上必須至少有一根手指，其餘手指放不放在該元素上無所謂。表示位於當前屏幕上的全部手指。
• targetTouches：位於當前DOM元素上的手指列表
• changedTouches：觸發當前事件的手指列表

其餘事件

橫豎屏切換事件

使用window.orientation 檢測橫豎屏，值爲下面的

• 0 豎屏（頭朝上）
• 180 豎屏（頭朝下）
• 90 橫屏（頭朝左）
• -90 橫屏（頭朝右）

代碼以下:

window.addEventListener('orientationchange',()=>{
                if(window.orientation==90 || window.orientation==-90){
                    alert('橫屏');
                }else if(window.orientation==0 || window.orientation==180){
                    alert('豎屏');
                }
            });

重力加速度事件

監聽devicemotion事件，在事件對象中，有下面的一些可用屬性
acceleration 設備在X,Y,Z三個軸的方向上移動的距離, 不包含重力加速度

• accelerationIncludingGravity 設備在X,Y,Z三個軸方向移動的距離, 包含重力加速度（重力加速度一般取值爲9.8m/s的二次方）

  x軸加速度    以手機屏幕左右兩側爲方向移動，往右爲正，往左爲負
      y軸加速度    以手機屏幕先後兩側爲方向移動，往前爲正，日後爲負
      z軸加速度    以手機屏幕上下兩側爲方向移動，往上爲正，往下爲負

• rotationRate 設備在Alpha, Beta, Gamma三個方向旋轉的速率（度/秒）

  alpha        以設備座標系z軸爲軸的旋轉速率
      beta        以設備座標系x軸爲軸的旋轉速率
      gamma        以設備座標系y軸爲軸的旋轉速率

• interval 從設備獲取數據的頻率, 單位是毫秒

注意：ios與android裏取到的屬性值不一致（正負相反），由於它們各自處理座標的方式不一樣

對於設備上的方向，能夠參考下面這張圖:

方向變化事件

監聽deviceorientation這個方向變化事件，事件對象當中，有下面幾個有用的值

• alpha 設備圍繞z軸方向旋轉的度數，範圍：0~360（頂部指向地球的北極，alpha此時爲0）
• beta 設備圍繞x軸方向旋轉的度數，由前向後，範圍：-180~180
• gamma 設備圍繞y軸方向旋轉的度數，由左向右，範圍：-90~90