zoukankan      html  css  js  c++  java
  • 移动端父元素绑定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事件可以顺利执行

  • 相关阅读:
    Head first javascript(七)
    Python Fundamental for Django
    Head first javascript(六)
    Head first javascript(五)
    Head first javascript(四)
    Head first javascript(三)
    Head first javascript(二)
    Head first javascript(一)
    Sicily 1090. Highways 解题报告
    Python GUI programming(tkinter)
  • 原文地址:https://www.cnblogs.com/justinwxt/p/7121611.html
Copyright © 2011-2022 走看看