H5_0038：父元素有touch事件，子元素有点击事件，如何实现点击事件

Posted 2021-03-03 eliteboy

移动端父元素绑定touch事件，子元素绑定click事件

一、问题描述

碰到一个非常头疼的问题，为了做一个滑动效果，给li标签绑定了touch事件。滑动之后，li标签的末尾会出现一个删除按钮，然后点击该删除按钮，删除整个li标签。

看起来没什么问题吧，实际上暗藏杀机啊。给删除按钮绑定点击事件的时候，并没有执行点击事件，而是先执行了父元素，也就是li标签的touch事件。

那怎么解决呢？

最开始想到的是，click事件应该设置成冒泡阶段执行，在设置个阻止冒泡，这样不就不会触发父元素的touch事件了。貌似很有道理。试了试，然并卵。

再分析，点击的时候，首先执行的就是touch事件，并不是冒泡阶段才执行的。也就是说我在点击删除按钮的时候必须把父元素的touch事件给禁止掉。

怎么解决？

二、解决方法

（1）方案一：

最简单的方法，把删除按钮写在li标签的外面。这样li标签就不是删除按钮的父元素了。点击删除按钮的时候就不会触发li标签的touch事件了。

这个方案跟本文的主题不是很符合对不对，没有解决核心问题。好，还有方案二。

（2）方案二：

在父元素的touch事件中进行判断，如果触发父元素的事件源是删除按钮的时候，父元素的touch事件就不执行。

思路有了，怎么写代码呢。

e.target有没有想到，通过判断这个就可以实现上面的思路了。

代码如下：

    elements[0].addEventListener(‘touchstart‘, cancel);

    function cancel(evt) {
        // console.log(evt.target.classList[0]);
        if (!evt.target.classList.contains("draggable")) {
            // console.log(‘3d‘);
            return;
        }

    }