一、问题描述
碰到一个非常头疼的问题,为了做一个滑动效果,给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事件可以顺利执行