屏幕事件穿透和攔截

事件穿透和攔截機制一樣並非deviceone平臺獨有的，這個機制幾乎是全部和UI相關的技術都共有，瞭解一下很是有必要。咱們會以一個簡單的例子來描述事件處理機制運行的過程。

屏幕事件處理機制

咱們先假定是手機屏幕顯示一個UI，裏面包括了4個View，這些View都是樹狀結構，父View下包含一個或多個子View，其中最上層的View和屏幕大小是一致的，參考下圖：

咱們能夠看到view1有一個子節點view2，view2包含2個子節點view3和view4.

假如咱們點擊屏幕一個位置，會產生一個事件event對象，整個流程都是這個對象在流轉，以下圖：

接下來的流程是：

整個屏幕接受到點擊事件後，view1先處理，注意是view1哦。咱們命名這個事件叫event1，這個事件包含了座標值，這個時候假設這個點擊的位置的座標是(x0,y0)，這裏咱們的座標都是相對整個屏幕。view1接受到event1後先判斷本身有沒有子節點，發現有一個子節點view2，先問view2：「點擊事件是你的區域內嗎？」view2是一個矩形，它會先判斷(x0,y0)是否在本身的區域裏，若是是，繼續判斷本身有沒有子節點，發現有2個子節點，先問view3，再問view4一樣的問題：「點擊事件是在你的區域內嗎？」view4告訴它的父節點view2，「點擊是在個人區域裏了」，view2會繼續問view4，「那你處理這個event1嗎？」view4若是處理，那麼event1的生命週期就到此結束了。（這是一般狀況，有特殊狀況，它能夠處理完event1，又手動把事件傳遞給別的view）view4若是不處理，那麼event1又返回到父親節點view2，一樣的邏輯，view2處理或者不處理返回給它的父節點view1。

總之，事件處理的機制是從根節點逐步到最末端的子節點，而後又返回回來一級級向父節點傳遞。

事件穿透和攔截

有了上面的機制基礎，咱們就能夠理解一下touch事件的處理方式了。好比下面的四種點擊處理，在不一樣的事件訂閱狀況下有不一樣的結果。以下：

1. 四個view都訂閱了事件

view1.on("touch",function(){
    deviceone.print("view1 touch")
})
view2.on("touch",function(){
    deviceone.print("view2 touch")
})
view3.on("touch",function(){
    deviceone.print("view3 touch")
})
view4.on("touch",function(){
    deviceone.print("view4 touch")
})

結果就是：

點擊1 會打印 "view1 touch"
點擊2 會打印 "view2 touch"
點擊3 會打印 "view3 touch"
點擊4 會打印 "view4 touch"

2. 四個view都訂閱了事件，可是view4的訂閱沒有任何代碼執行。會致使事件攔截

view1.on("touch",function(){
    deviceone.print("view1 touch")
})
view2.on("touch",function(){
    deviceone.print("view2 touch")
})
view3.on("touch",function(){
    deviceone.print("view3 touch")
})
view4.on("touch",function(){
    //do nothing
})

結果就是：

點擊1 會打印 "view1 touch"
點擊2 會打印 "view2 touch"
點擊3 會打印 "view3 touch"
點擊4 什麼都不會打印,事件被view4攔截了

3. 只有三個view訂閱了事件，view4沒有訂閱。會致使事件穿透。

view1.on("touch",function(){
    deviceone.print("view1 touch")
})
view2.on("touch",function(){
    deviceone.print("view2 touch")
})
view3.on("touch",function(){
    deviceone.print("view3 touch")
})

結果就是：

點擊1 會打印 "view1 touch"
點擊2 會打印 "view2 touch"
點擊3 會打印 "view3 touch"
點擊4 會打印 "view2 touch"，view4上的點擊穿透view4到達view2

4. 只有view1訂閱了事件，其它都沒有訂閱。會致使事件一直穿透到最根節點。

view1.on("touch",function(){
    deviceone.print("view1 touch")
})

結果就是：

點擊1 會打印 "view1 touch"
點擊2 會打印 "view1 touch"
點擊3 會打印 "view1 touch"
點擊4 會打印 "view1 touch"