mobile_點透_傳透_touch-action

點透（傳透）

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

PC  的 click 事件 在移動端，會有 300 ms 的延遲。就是由於避免和手機雙擊行爲發生衝突

• 點透現象：（面試題）
• 輕輕觸碰 box ，box 消失

當點擊 非文字覆蓋區域 時，盒子正常消失。

當點擊 文字區域時，頁面發生跳轉。

 

• 理想狀況：

不管點擊哪一個區域，只要是點擊盒子，盒子都消失，而不影響 a

 

• 解決方案1：（面試闡述）

click    事件監聽，

缺點： PC 端的 click 事件 在 移動端有 300 ms 的延遲

• 解決方案2（模擬器測試無效, 移動端有效）：

① 讓 a 元素不能跳轉，即取消瀏覽器的默認行爲

• document.addEventListener("touchstart", function(e){
      e.preventDefault();
  }, false);

② box 盒子消失，點擊 a 元素，a 應該跳轉，即給 a 元素指定一個全新的跳轉動做

•  // 點透（傳透）
      (function(){ // 1. 取消默認行爲 document.addEventListener("touchstart", function(e){ e.preventDefault(); }, false); var aNodes = document.querySelectorAll('a'); for (var i=0;i<aNodes.length;i++) { aNodes[i].addEventListener('touchstart',function(){ window.location = this.href; // 2. 獲取 a 的跳轉地址, 交給 window 實現跳轉  }, false); }; })(); /****    模擬器測試無效, 實際測試有效
      window.location 是一個只讀對象，全部字母必須小寫
      可是仍然能夠賦予一個對象 DOMString
      兩種寫法，效果一致
      window.location = "https://www.baidu.com";
      window.location.href = "https://www.baidu.com";
   ****/

關於瀏覽器報錯

• [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See…

是由於在取消瀏覽器默認行爲後，瀏覽器將觸屏事件識別爲被動，而報錯

 

• 需求：

會影響交互操做，例如，自定義滾動，或者元素拖拽效果等，
會觸發瀏覽器原生的滾動，產生很差的交互體驗效果

 

• 解決：

1. 加入 css    //  

• html { touch-action: none; }

缺點：

• iOS Safari瀏覽器不支持
• 幹掉了可能須要的原生的touch相關行爲

2. 直接傳遞 {passive:false} ，告訴瀏覽器是主動要求阻止默認行爲的，解決 treated as passive 錯誤

•  document.addEventListener("touchstart", function(e){ e.preventDefault(); }, {passive: false});

總結：

在使用以上方法去除錯誤後，
須要自定義全部 點擊，滑動，縮放等等事件！！！
不然你就會出現滑動失效這一類的錯誤了！

 

 

touch-action: auto;

移動端一個與手勢觸摸密切相關的 CSS 屬性,

源自windows phone手機, 後被廣大瀏覽器引入

移動端能夠暢行的CSS屬性

 

可選值: 

• touch-action: auto;

默認值，表示手勢操做什麼的徹底有瀏覽器本身決定

• touch-action: manipulation;

瀏覽器只容許進行滾動和持續縮放操做，相似雙擊縮放這種非標準操做就不能夠。

想當初，click事件在移動端有個300ms延時，就是由於避免和手機雙擊行爲發生衝突

設置後就幹掉了雙擊行爲，避免瀏覽器click事件300ms延時問題

有了 touch-action:manipulation，咱們能夠在網頁中放心大膽使用click事件了

auto 和 manipulation 是 Safari 惟一支持的兩個 touch-action 屬性值

其餘關鍵字，正如字面意思，要麼只能左移，要麼只能左右移動，要麼只能右移之類

• touch-action: none;

不進行任何touch相關默認行爲

例如，你想用手指滾動網頁就不行，雙擊放大縮小頁面也不能夠，全部這些行爲要自定義

任意組合如： touch-action: pan-left pan-up pan-zoom; 表示能夠左移，上移和縮放。

• touch-action: pinch-zoom;

手指頭能夠用來縮放頁面

• touch-action: pan-x;

手指頭能夠水平移來移去

• touch-action: pan-left;

手指頭能夠往左移動，移動開始後仍是能夠往右恢復的

• touch-action: pan-right;

手指頭能夠能夠往右移動，移動開始後仍是能夠往左恢復的

• touch-action: pan-y;

手指頭能夠垂直移來移去

• touch-action: pan-up;

手指頭能夠往上移，移動開始後仍是能夠往下恢復的

• touch-action: pan-down;

手指頭能夠往下移，移動開始後仍是能夠往上恢復的