weex開發之手勢事件衝突解決

在開發中在使用weex手勢事件時遇到了問題，在Android端，當給某個容器類元素上添加手勢事件或者綁定bindingX表達式之後，如果在這個容器內部添加了list或者scroller等滾動元素，就會導致手勢事件無法觸發。

我們看到weex官方文檔在手勢部分說明“目前，由於會觸發大量事件衝突，Weex Android 還不支持在滾動類型的元素上監聽手勢，例如 scroller, list 和 webview這三個組件”。那麼我們如果真的有在滾動元素上監聽手勢事件的需求的話怎麼解決這個問題呢，下面給出幾種解決方案：

1、使用swipe或者horizontalpan/verticalpan

我們發現這兩個事件即使我們嵌套了滾動元素也是可以正常觸發的，如果不需要實時的獲取手勢狀態改變元素狀態，那麼使用這個兩個事件是不錯的選擇，比如列表的側滑刪除，我們就可通過使用horizontalpan就能滿足需求，這裏我們需要注意的是swipe事件是與click事件衝突的。

2、解決事件衝突

    因爲weex的事件默認是從裏往外冒泡的，即內層事件優先被處理，外層的事件會被內層事件打斷，因此不能在滾動元素或者其外層元素使用touch和pan手勢，會被滾動事件打斷，我們可以在滾動元素的所有根子元素上添加手勢事件綁定,配合prevent-move-event屬性，就可以解決事件衝突。

例子：

我們的需求是真個list跟隨手指移動，看到需求我們首先會想到把手勢事件給到這個list或者list的容器上，但是我們發現事件無法被正常觸發，如上面所說的，list的滾動事件是優先於container的手勢事件觸發的，因此最外層div的手勢事件無法被正常觸發。那麼我們把事件給到list的每一個根子元素，並設置prevent-move-event="true"，這個屬性官方並沒有給出，通過閱讀weex相關的源碼，瞭解到這個屬性是阻止事件向上傳遞或者說使得事件不會被系統事件（scroll事件等）打斷。

<div ref="container"  @pansart="pansart" @panmove="panmove">
     <list ref="list">
        <cell class="cell_item" v-for='i in 10' :prevent-move-event="true" @pansart="pansart"  @panmove="panmove">
               
          <div>
          </div>
        </cell>
     </list>
</div>
<script>
 export default {
    methods:{
        
        pansart(){
            
        }
        panmove(){
           //我們的需求是這裏對移動整個list的容器
        }

    }
 }
</script>

如有問題，歡迎提問。

如另有高見，還望不吝賜教！

我的weex相關博客：weex開發系列

我的開源weex模板項目：IWeex