移動端多指操作一 ios篇

2021-09-29 17:38:25 字數 1871 閱讀 7595

說在前面

移動端常用的事件上篇文章已講,這篇文章講點花的,多指操作(ios篇

ios 多指操作

第一步 清除預設事件

// 清除預設事件 否則會選取元素

document.

addeventlistener

("touchstart"

,(e)

=>

)

gesturestart 事件

var con = document.

getelementbyid

("con");

// 手指觸控螢幕 螢幕上有兩個或者兩個以上的手指

con.

addeventlistener

("gesturestart"

,(e)

=>

)

gesturechange 事件

//手指觸碰元素,螢幕上有兩個或兩個以上的手指,位置在發生移動

con.

addeventlistener

('gesturechange'

,function

(e))

;

gestureend 事件

//手指離開事件

con.

addeventlistener

('gestureend'

,function()

);

多指操作應用例項

封裝乙個csstransform做一些花式操作
function

csstransform

(element, attr, val);}

if(typeof val ===

"undefined")}

//取值完畢,返回該值

return element.transform[attr];}

else

} element.style.webkittransform = element.style.transform = transformval;

}

多指操作實現旋** 初始值+差值
var con= document.

getelementbyid

('con');

var start =0;

obox.

addeventlistener

('gesturestart'

,function

(e),

false);

obox.

addeventlistener

('gesturechange'

,function

(e),

false

);

多指操作實現縮放: 初始值+差值
var start =0;

// 消除縮放時的殘影

csstransform

(con,

'translatez',0

);con.

addeventlistener

('gesturestart'

,function

(e),

false);

con.

addeventlistener

('gesturechange'

,function

(e),

false

);

移動端多指操作二 安卓篇 相容性處理

說在前面 上篇文章說了ios上的多指操作,那為什麼不放在一起,把安卓的也一起講了,因為安卓的存在相容問題,gesturestart,gesturechange等事件安卓上都是沒有的,這些只存在於ios裝置上,所以這些事件安卓裝置上無效,需要自己封裝。第一步 定義乙個匿名自執行函式 匿名自執行函式的優...

vue 多點觸控手勢 移動端手勢事件(多指操作)

在移動端開發中,現有的手勢事件只有ios上的瀏覽器支援,因此對其他裝置上的瀏覽器手勢事件我們必須在移動端的touchstart toucmove touchend事件上進行改造公升級,下面就介紹下公升級改造的移動端的手勢事件。移動端觸控事件 基礎事件 touchstart 觸控開始 touchmov...

移動端多頁面應用(MPA)的開發(一)

多頁面應用和單頁面應用 基於vue的mpa移動專案的開發 windows環境 建立專案 開發示例 附錄 使用git命令切換和合併分支示例 使用者體驗好 與伺服器端 pc端 開發技術不通用 與伺服器端 pc端 開發技術可通用 與伺服器端 pc端 開發技術可通用 本專案基於vue框架開發,ui採用min...