說在前面移動端常用的事件上篇文章已講,這篇文章講點花的,多指操作(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...