移動端父元素綁定touch事件，子元素綁定click事件

一、問題描述

碰到一個非常頭疼的問題，為了做一個滑動效果，給li標簽綁定了touch事件。滑動之后，li標簽的末尾會出現一個刪除按鈕，然后點擊該刪除按鈕，刪除整個li標簽。

看起來沒什么問題吧，實際上暗藏殺機啊。給刪除按鈕綁定點擊事件的時候，並沒有執行點擊事件，而是先執行了父元素，也就是li標簽的touch事件。

那怎么解決呢？

最開始想到的是，click事件應該設置成冒泡階段執行，在設置個阻止冒泡，這樣不就不會觸發父元素的touch事件了。貌似很有道理。試了試，然並卵。

再分析，點擊的時候，首先執行的就是touch事件，並不是冒泡階段才執行的。也就是說我在點擊刪除按鈕的時候必須把父元素的touch事件給禁止掉。

怎么解決？

二、解決方法

（1）方案一：

最簡單的方法，把刪除按鈕寫在li標簽的外面。這樣li標簽就不是刪除按鈕的父元素了。點擊刪除按鈕的時候就不會觸發li標簽的touch事件了。

這個方案跟本文的主題不是很符合對不對，沒有解決核心問題。好，還有方案二。

（2）方案二：

在父元素的touch事件中進行判斷，如果觸發父元素的事件源是刪除按鈕的時候，父元素的touch事件就不執行。

思路有了，怎么寫代碼呢。

e.target有沒有想到，通過判斷這個就可以實現上面的思路了。

代碼如下：

    deletes.forEach(function(v,i){
                if(v == e.target){
                    flag = 1;
                }
            })
            if(flag){
                flag = 0 ;
                return;
            }

deletes為多有的刪除按鈕。把這段代碼放到touchstart,touchmove,touchend事件中去。這樣就可以阻止touch事件的執行了。而綁定在delete按鈕上的click事件可以順利執行