首頁 > 其他

jquery 怎樣獲取觸控螢幕坐標

2019-12-12 06:12:05

jquery是一個javascript的封裝庫,javascript提供了touch事件(包括touchstart,touchmove,touchend)等來獲取觸控螢幕的資訊,本文將詳細介紹jquery 怎樣獲取觸控螢幕坐標,詳細的例子說明如下。

1

第一步,首先我們前往官網檢視一下touch事件的詳細說明和使用方法,

clientX / clientY:      //觸控點相對瀏覽器視窗的位置

pageX / pageY:       //觸控點相對於頁面的位置

screenX  /  screenY:    //觸控點相對於螢幕的位置

詳細如下圖


2

第二步,為了我們更加方便的對javascript的操作,我們使用html編輯器sublime_text,詳細如下圖


3

第三步,我們建立一個html檔案,然後寫入網頁的基本程式碼,引入jquery,詳細如下圖


4

第四步,我們寫入一個觸控螢幕事件touchstart,然後利用screenX,screenY獲取相對於螢幕的坐標,詳細程式碼如下圖


5

第五步,我們把html檔案拖到瀏覽器中開啟,然後按f12,然後在按快捷鍵ctrl+shift+m調出手機模式,也可以點選下面的圖示,詳細如下圖


6

第六步,手機模式下,我們可以偵錯了,滑鼠模擬手指觸控螢幕,每次點選都獲取當前距離螢幕的坐標,詳細如下圖



IT145.com E-mail:sddin#qq.com