這篇文章主要介紹HTML5觸摸事件的實現(xiàn)示例,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
為康縣等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務,及康縣網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站制作、成都網(wǎng)站設計、康縣網(wǎng)站設計,以傳統(tǒng)方式定制建設網(wǎng)站,并提供域名空間備案等一條龍服務,秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!
HTML5中新添加了很多事件,但是由于他們的兼容問題不是很理想,應用實戰(zhàn)性不是太強,所以在這里基本省略,咱們只分享應用廣泛兼容不錯的事件,日后隨著兼容情況提升以后再陸續(xù)添加分享。今天為大家介紹的事件主要是觸摸事件:touchstart、touchmove和touchend。
一開始觸摸事件touchstart、touchmove和touchend是iOS版Safari瀏覽器為了向開發(fā)人員傳達一些信息新添加的事件。因為iOs設備既沒有鼠標也沒有鍵盤,所以在為移動Safari瀏覽器開發(fā)交互性網(wǎng)頁的時候,PC端的鼠標和鍵盤事件是不夠用的。
在iPhone 3Gs發(fā)布的時候,其自帶的移動Safari瀏覽器就提供了一些與觸摸(touch)操作相關的新事件。隨后,Android上的瀏覽器也實現(xiàn)了相同的事件。觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候出發(fā)。下面具體說明:
touchstart事件:當手指觸摸屏幕時候觸發(fā),即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。
touchmove事件:當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間,調(diào)用preventDefault()事件可以阻止?jié)L動。
touchend事件:當手指從屏幕上離開的時候觸發(fā)。
touchcancel事件:當系統(tǒng)停止跟蹤觸摸的時候觸發(fā)。關于這個事件的確切出發(fā)時間,文檔中并沒有具體說明,咱們只能去猜測了。
上面的這些事件都會冒泡,也都可以取消。雖然這些觸摸事件沒有在DOM規(guī)范中定義,但是它們卻是以兼容DOM的方式實現(xiàn)的。所以,每個觸摸事件的event對象都提供了在鼠標實踐中常見的屬性:bubbles(起泡事件的類型)、cancelable(是否用 preventDefault() 方法可以取消與事件關聯(lián)的默認動作)、clientX(返回當事件被觸發(fā)時,鼠標指針的水平坐標)、clientY(返回當事件觸發(fā)時,鼠標指針的垂直坐標)、screenX(當某個事件被觸發(fā)時,鼠標指針的水平坐標)和screenY(返回當某個事件被觸發(fā)時,鼠標指針的垂直坐標)。除了常見的DOM屬性,觸摸事件還包含下面三個用于跟蹤觸摸的屬性。
touches:表示當前跟蹤的觸摸操作的touch對象的數(shù)組。
targetTouches:特定于事件目標的Touch對象的數(shù)組。
changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。
每個Touch對象包含的屬性如下。
clientX:觸摸目標在視口中的x坐標。
clientY:觸摸目標在視口中的y坐標。
identifier:標識觸摸的唯一ID。
pageX:觸摸目標在頁面中的x坐標。
pageY:觸摸目標在頁面中的y坐標。
screenX:觸摸目標在屏幕中的x坐標。
screenY:觸摸目標在屏幕中的y坐標。
target:觸目的DOM節(jié)點目標。
上面的屬性光這么看,果然非常繁瑣,每個屬性說的都是那么的細致,只有真刀實槍的來點小例子才能更加明白其中的奧妙。所以小例子如下。
function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; } } } window.addEventListener('load',load, false);
對上面的代碼稍微做點改動,可以判斷水平方向滑動的方向,然后左相應的動作,如下:
function load(){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); var distance,clientX_start,clientX_end, minRange=10; this.clientX_start; this.direction; this.callbackFun=function(){ if(this.direction=='ltr') { console.log('從左往右'); } else { console.log('從右往左'); } } switch(event.type){ case "touchstart": clientX_start=event.touches[0].clientX; this.clientX_start=clientX_start; break; case "touchend": this.callbackFun(); break; case "touchmove": event.preventDefault(); clientX_end = event.changedTouches[0].clientX; //判斷移動的方向 distance=clientX_end-this.clientX_start; if(this.clientX_start+minRange<clientX_end) { this.direction='ltr'; } else if(this.clientX_start-minRange>clientX_end){ this.direction='rtl'; } break; } } } window.addEventListener('load',load, false);
以上是“HTML5觸摸事件的實現(xiàn)示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
標題名稱:HTML5觸摸事件的實現(xiàn)示例
地址分享:http://muchs.cn/article4/ispcoe.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設計公司、ChatGPT、外貿(mào)網(wǎng)站建設、品牌網(wǎng)站制作、品牌網(wǎng)站設計、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)