閱讀520 返回首頁    go 阿裏雲 go 技術社區[雲棲]

ios上safari的事件模型(一)

safari在desktop端和mobile端大部分的功能都是一樣，我們重點說下差別在什麼地方，以及這些差別所引起的問題。我們知道ios在mobile端增加了觸摸的功能，觸摸功能肯定要用到手指的操作，這個是和desktop端有很大區別的。當我們用手指操作的時候，可能用到一個手指，兩個手指或者多個手指，同時手指觸摸到不同的dom元素會引起什麼不同的行為，我們主要圍繞這些問題展開。

名詞解釋：

clickable元素：link,form,image和擁有mousemove, mousedown, mouseup, or onclick處理器的其他元素；

scrollable元素：text area,iframe和擁有overflow樣式的其他元素；


一個手指操作時的事件

當一個手指按住屏幕並且在屏幕上移動不會發生任何事件，直到停止移動，會有onscroll事件產生，然後頁麵重繪，如下圖：

pastedGraphic.pdf

當一個手指快速的在屏幕上雙擊，也不會產生任何事件，如下圖：

               

當一個手指點擊一個 nonclickable元素時，不會產生任何事件；如果點擊的是一個clickable元素，事件發生的順序為mouseover, mousemove, mousedown, mouseup, and click，但再點擊到另外一個clickable元素時，會發生mouseout事件，如果在mousemove事件發生時有頁麵的內容發生變化，就不會有後續的事件發生，如下圖：

               

兩個手指操作時的事件

當兩個手指在屏幕上使用捏住或者分開的手勢時，不發生任何鼠標事件，如下圖

                     

當兩個手指按住一個 scrollable元素，並且同時移動兩個手指， mousewheel 事件產生；如果元素不是scrollable元素，不產生事件；當停止移動時，onscroll事件產生，如下圖：

                             

多點觸摸事件

我們是可以使用javascript dom中的touch event類，來控製多點觸摸和手勢事件,主要通過下麵幾個事件來控製：

  • touchstart - 當touch事件初始化觸發. 等同於 mouseDown事件
  • touchmove - 當touch移動時觸發，等同於 mouseMove事件
  • touchend - 當touch結束時觸發，等同於mouseUp. 

     發生事件的 event對象會包含下麵的數組：

  • touches - 包含touchstart,touchmove事件的信息
  • targetTouches - 包含綁定touch事件的元素的信息，和touches區別，見這裏
  • changedTouches - 包含所有touch事件的信息

     數組中中每個對象是一個touch對象，其就是safari裏定義的一個對象，但是這裏這個對象不等同於實際觸摸點擊的html元素，主要會包括如下屬性：

pageX                                 相對於父元素的x坐標
pageY                                 相對於父元素的y坐標
clientX                                 相對於當前窗口的x坐標
clientY                                 相對於當前窗口的y坐標
identifier                              都是一些數字，用法暫時還不清楚
screenX                               相對於當前屏幕的x坐標
screenY                               相對於當前屏幕的y坐標
target                                    指代當前點擊的對象

手勢事件

多點觸摸事件可以模擬手勢事件，如放大，旋轉等，主要包括下麵幾個api

  • gesturestart -當多點觸摸初始化時觸發
  • gesturechange - 等多點觸摸移動時觸發
  • gestureend - 當多點觸摸結束時觸發

      手勢事件的對象中沒有touch對象，他會包含scale,rotation這樣的屬性；

如：document.addEventListener('gesturechange', function(event) {

    event.preventDefault();

    console.log("Scale: " + event.scale + ", Rotation: " + event.rotation);

}, false);

這裏對ios中的safari的事件模型做了一個全麵的介紹，那麼使用過程中會遇到哪些問題，以及具體的解決方案我們會在下篇文章介紹


參考：

handling events

JavaScript Touch and Gesture Events iPhone and Android

Touching and Gesturing on the iPhone

safari裏的touch事件解析









最後更新：2017-04-02 16:47:59

  上一篇：go MyEclipse中文件被外編輯器修改後需要在MyEclipse中refresh
  下一篇：go 二進製兼容原理 - C/C++ &Java