移動端觸控事件(touch)事件組
touch是移動端的觸控事件,是一組事件,利用touch相關事件實現移動端常見的滑動效果和手勢事件。
常用的事件:
touchstart:當手指觸控式螢幕幕時觸發
touchmove:手指在螢幕來回滑動時觸發
touchend:手指離開螢幕時觸發
touchcancel:被迫中止時觸發(如來電、訊息彈出)
使用touch:
1.繫結事件
變數名.addEventlistener('touchstart',function(){});
如:
box.addEventlistener('touchstart',function(){});
2.事件物件
changeTouches:改變後的觸控點的集合
targetTouches:當前元素的觸發點集合
touches:頁面上所有的觸發點的集合
觸控點集合在每個事件觸發時,changeTouches每個事件都會記錄觸控,targetTouches,touches在離開螢幕時無法記錄觸控點。
相關推薦
移動端觸控事件(touch)事件組
touch是移動端的觸控事件,是一組事件,利用touch相關事件實現移動端常見的滑動效果和手勢事件。 常用的事件: touchstart:當手指觸控式螢幕幕時觸發 touchmove:手指在螢幕來回滑動時觸發 touchend:手指離開螢幕時觸發 touchcanc
H5移動端開發基礎(一)事件基礎
事件基礎 移動端基礎事件 滑屏原理 transform 與 transition 無縫滑屏自動播放幻燈片 移動端基礎事件 手指按下:touchstart <==> mousedown 手指擡起:touchend <
PC和移動端判斷滑鼠(手指)滑動方向(touch方向)
//移動端 $(".demo").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.
移動端學習筆記(一)
標簽設置 裏的 none trait 關於 http width 面具 屏幕 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-s
移動端自動化測試(一)appium環境搭建
mouseover 小試牛刀 ble web自動化 過程 bucket 搭建 node 服務 自動化測試有主要有兩個分類,接口自動化和ui自動化,ui自動化呢又分移動端的和web端的,當然還有c/s架構的,這種桌面程序應用的自動化,使用QTP,只不過現在沒人做了。 we
移動端適配(2)---viewport適配
float scala screen bsp pen meta log initial width 通過viewport來適配 <script> (function(){ var w=window.screen.width; console.log(w)
移動端適配(3)---rem適配
span meta view strong on() font doc nts cti rem適配 <meta name="viewport" content="width=device-width,user-scalable=no"/> <script
javaScript事件(一)事件流
一、事件 事件是文件或者瀏覽器視窗中發生的,特定的互動瞬間。 事件是使用者或瀏覽器自身執行的某種動作,如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之間互動的橋樑。 你若觸發,我便執行——事件發生,呼叫它的處理函式執行相應的JavaSc
移動端的總結(一)
// 一.click的300ms的延遲相應 // 原理是click的300ms延遲是由於雙擊縮放所導致的,由於使用者可以通過進行雙擊縮放或者雙擊滾動的操作 // 當用戶一次點選螢幕之後,瀏覽器並不能立刻判斷使用
Eruda——手機網頁前端除錯面板 移動端除錯神器(eruda)
移動端除錯神器(eruda) 在日常的移動端開發時,一般都是試用chrome瀏覽器的移動端模式進行開發和除錯,只有在chrome除錯完成,沒有問題了才會上到真機測試,移動端開發的一大問題就在於此, 各種品牌各種型號手機,手機中各種型別的瀏覽器APP........還
移動端頁面開發(一)
從我工作以來,開發的一直都是移動端的頁面,只有偶爾去開發幾個PC端的頁面,現在是一個移動端的時代,移動先行已經深入骨髓,作為一個web前端開發,如果你還在為如何開發移動端頁面而迷茫,或者你還在為開發出了一個在你手機上“完美”的移動頁面而沾沾自喜卻不知移動的世界有多“殘酷”的時候,那你應該看看這篇文章了。希望這
移動端那些事兒(一)移動端開發注意事項
對於手機網站建設,總結了如下幾點注意: 1、 安卓瀏覽器看背景圖片,有些裝置會模糊。 用同等比例的圖片在PC機上很清楚,但是手機上很模糊,原因是什麼呢? 經過研究,是devicePixelRatio作怪,因為手機解析度太小,如果按照解析度來顯示網頁,這樣字會非常小,所以蘋果當初就把iPhone 4的9
【前端庫】HTML 移動端適配(推薦)
案例單擊我 上一篇文章我寫了,關於移動端適配問題,傳送門開,這一次也關於移動端適配問題,這個方式比較常用。我經常在公司得專案中使用 直接貼上適配程式碼: /* * @Author: a * @D
H5移動端開發基礎(四)多指操作、案例-相簿
多指操作、案例-相簿 多指操作 旋轉 縮放 實現安卓多指事件 案例-相簿 多指操作 // gesturestart:手指觸碰元素,螢幕上有兩個或兩個以上的手指 oBox.addEventListener
H5移動端開發基礎(三)自定義滾動條、實戰-音悅臺
自定義滾動條、實戰-音悅臺 自定義滾動條 js封裝 transform.js tween.js scrollBar.js 音悅臺 適配 樣式 html
H5移動端開發基礎(二)適配、3D、animation
適配、3D、animation 適配 rem適配 getBoundingClientRect viewport適配 橫豎屏適配 方法一 方法二 3D
支付寶API介面--移動端網頁支付(沙箱)
前面一段時間,因為公司業務需求,需要使用支付寶的手機網站支付介面,因為自己也是第一次使用這個,中間走了不少彎路,現在總結一下,希望對遇到同樣問題的朋友有幫助。 第一步:登入螞蟻金服開放平臺螞蟻金服開放平臺連線,在這裡你可以使用自己的支付寶進行登入,也可以使用公司
Xamarin 跨移動端開發系列(01) -- 搭建環境、編譯、除錯、部署、執行
(本文是基於老版本的VS和Xamarin,而VS2017已經集成了Xamarin,所以,本文已經過時,最新的Xamarin開發介紹請參見 使用 Xamarin開發手機聊天程式 。) 如果是.NET開發人員,想學習手機應用開發(Android和iOS),Xamarin 無疑是最好的選擇,編寫一次,
移動端開發demo—移動端web相簿(一)
本文主要是介紹開發移動端web相簿這樣一案例用到的前置知識。 一、移動端樣式 移動端更接近手機原生的方式。 如下是一個angular mobile的demo的例子: 移動端demo做成這樣的好處: 在手機端瀏覽器中開啟,接近原生app應用。 打包成Android或者io
移動端混合開發(1):和H5的javascript互動
最近公司專案開發中涉及到了大量的混合開發,這裡開一個系列,把開發中的經驗和遇到的問題和大家分享下 講到移動端的混合開發,繞不開的一個話題就是原生和Js的互動,關於iOS、Android怎麼和js互動,網上的資料很多,這裡先簡單介紹幾個方法。 js