mobile 點透 傳透

2022-05-04 01:33:07 字數 1677 閱讀 9032

點透(傳透)

pc  的 click 事件 在移動端,會有 300 ms 的延遲。就是因為避免和手機雙擊行為發生衝突

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

當點選 文字區域時,頁面發生跳轉。

無論點選哪個區域,只要是點選盒子,盒子都消失,而不影響 a

click    事件監聽,

缺點: pc 端的 click 事件 在 移動端有 300 ms 的延遲

讓 a 元素不能跳轉,即取消瀏覽器的預設行為

box 盒子消失,點選 a 元素,a 應該跳轉,即給 a 元素指定乙個全新的跳轉動作

關於瀏覽器報錯

是因為在取消瀏覽器預設行為後,瀏覽器將觸屏事件識別為被動,而報錯

會影響互動操作,例如,自定義滾動,或者元素拖拽效果等,

會觸發瀏覽器原生的滾動,產生不好的互動體驗效果

1. 加入 css    //  

缺點:

2. 直接傳遞 ,告訴瀏覽器是主動要求阻止預設行為的,解決 treated as passive 錯誤

總結:

在使用以上方法去除錯誤後,

需要自定義所有 點選,滑動,縮放等等事件!!!

否則你就會出現滑動失效這一類的錯誤了!

touch-action: auto;

移動端乙個與手勢觸控密切相關的 css 屬性,

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

移動端可以暢行的css屬性

可選值:

預設值,表示手勢操作什麼的完全有瀏覽器自己決定

瀏覽器只允許進行滾動和持續縮放操作,類似雙擊縮放這種非標準操作就不可以。

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

設定後就乾掉了雙擊行為,避免瀏覽器click事件300ms延時問題

有了 touch-action:manipulation,我們可以在網頁中放心大膽使用click事件了

auto 和 manipulation 是 safari 唯一支援的兩個 touch-action 屬性值

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

不進行任何touch相關預設行為

例如,你想用手指滾動網頁就不行,雙擊放大縮小頁面也不可以,所有這些行為要自定義

任意組合如: touch-action: pan-left pan-up pan-zoom; 表示可以左移,上移和縮放。

手指頭可以用來縮放頁面

手指頭可以水平移來移去

手指頭可以往左移動,移動開始後還是可以往右恢復的

手指頭可以可以往右移動,移動開始後還是可以往左恢復的

手指頭可以垂直移來移去

手指頭可以往上移,移動開始後還是可以往下恢復的

手指頭可以往下移,移動開始後還是可以往上恢復的

透傳訊息和非透傳訊息

目前的訊息推送方式主要有兩種 通知和透傳。什麼是透傳?透傳即是透明傳送,即傳送網路無論傳輸業務如何,只負責將需要傳送的業務傳送到目的節點,同時保證傳輸的質量即可,而不對傳輸的業務進行處理。透傳訊息,就是訊息體格式及內容,對於傳遞的通道來說是不去過問的,通道只負責訊息的傳遞,對訊息不做任何處理,當客戶...

透傳服務搭建

與前ifconfig查到的網絡卡名稱一致 relay device eth0 listening ip 172.19.176.106 relay ip 172.19.176.106 relay ip 可以不設定,缺省會使用你的外網ip位址作為 包的中繼位址 listening port 3478 監...

vue元件透傳

當我們試使用某一元件庫,或者其他不能修改或者不建議修改的元件時,如vant的button元件,它預設type為default,我要讓他type預設為primary的話,每次都要傳入type引數 主要按鈕1 主要按鈕2 主要按鈕3 那如果我想不傳引數就讓它type為primary的話,通常的做法就是再...