收藏
回答

外层使用catchtouchstart影响内层tap事件响应

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug catchtouchstart 客户端 7.0.7 2.7.1

bug表现:

如题,如果我在外层的view  catch了touchstart那么内层的tap事件会不响应。不知道这个是不是bug。


- 预期表现

内层tap事件正常响应。如果不能正常响应那么就会有一个在我看来很严重的问题,首先假定现在有三层,内层、外层、最外层(也是在代码片段里简单演示了),如果我最外层里面有touch的逻辑,同时不希望点击在内层的时候响应,应该怎么办。如果在外层catch那内层的tap不能用,如果不catch那就达不到要求。

- 复现路径

点击代码片段中的外层可捕捉到touch事件,点击内层无法响应tap事件

- 提供一个最简复现 Demo

已附代码片段



最后一次编辑于  2019-06-18
回答关注问题邀请回答
收藏

3 个回答

  • LastLeaf
    LastLeaf
    2019-06-21

    基础库里面有个规则:如果 touchstart 被 catch (无论在哪一层),则对应的 tap 事件不会触发。


    想知道你具体的场景是什么样呢?

    2019-06-21
    有用
    回复 6
    • 2019-06-24

      按钮组件A覆盖在有touch事件的组件B上了,A组件的功能是切换B组件的内容,B组件start事件会根据当前A组件设置的内容获取数据,end会相应的更新数据回去,不catch的话点击A就会发生(假定点击前是内容C点击后是内容D),start获取内容C数据,tap:切换到内容D,end更新数据,这样就是错误的,我之前想的是catch掉所有的touch事件来实现,现在看保留start不catch其实也可以实现

      2019-06-24
      回复
    • LastLeaf
      LastLeaf
      2019-06-24回复

      好的。麻烦使用其他方法来实现。因为这个规则是一开始就有的,我们现在也不太好去掉了。

      2019-06-24
      回复
    • 苏察哈尔灿
      苏察哈尔灿
      2020-03-27
      1.  我想处理swiper里边轮播的图片支持缩放,如果图片当前无缩放,则左右滑动是swiper滑动,如果图片放大了,左右滑动是image的滑动查看;
      2. 目前的逻辑是swiper没加bindtouch事件(加了也一样),image实现了catchtouch的start, move, end事件,我在catchtouchstart里边判断如果当前scale是1,则返回false,希望事件传递给swiper,但无效;
      3. 我想知道怎么在child的事件处理中处理当前事件是否拦截,好让它是否传递给swiper
      2020-03-27
      回复
    • LastLeaf
      LastLeaf
      2020-03-31回复苏察哈尔灿
      可以把 catch* 写成一个表达式如 catchtouchstart="{{ enabled ? 'funcName' : '' }}" ,需要正常 catch 的时候,它的值是响应函数名,否则是空字符串(表示不 catch )。
      2020-03-31
      回复
    • 苏察哈尔灿
      苏察哈尔灿
      2020-03-31
      完美,感谢
      2020-03-31
      回复
    查看更多(1)
  • 轻舞弄影
    轻舞弄影
    06-20

    我是写的悬浮球,所以必须要兼顾拖拽和触摸事件。以下方法可以进行拖拽和tap同时实现

    html:

    <view  catchtouchstart="dragStart" catchtouchmove="drag" catchtouchend="dragEnd"> </view>
    
    

    js:

    data: {

        startX: 0, 
        startY: 0, 
        isDragging: false,
        isDrag:false //是否是拖拽操作
      }
    //移动开始
    dragStart(e) {  
          this.setData({  
            startX: e.touches[0].clientX,  
            startY: e.touches[0].clientY,  
            isDragging: true,  
          });  
        },  
    //移动目标
        drag(e) {  
          if (!this.data.isDragging) return;  
          let deltaX = e.touches[0].clientX - this.data.startX;  
          let deltaY = e.touches[0].clientY - this.data.startY; 
          //横向和纵向位移小于1时,认为没有对目标进行移动
          let dragFlag = this.data.isDrag || deltaX >1 || deltaY >1 
          this.setData({  
            isDrag:dragFlag,  
            startX: e.touches[0].clientX,  
            startY: e.touches[0].clientY
          });  
        },  
      //移动结束
        dragEnd(e) {  
          const dragFlag = this.data.isDrag;
          //先回写状态,再进行操作。
          this.setData({  
            isDragging: false, 
            isDrag:false 
          });  
          if(!dragFlag){
            //此处写tap相关操作
          }
    

         }


    希望对你有帮助

    06-20
    有用
    回复
  • 微盟
    微盟
    2019-06-18

    外层不要catch touchstart事件,在内层catchtap和catchtouchstart,不知道这样能不能满足你的需求?



    2019-06-18
    有用
    回复 1
    • 2019-06-18

      。。代码复制去看了一下,你这样tap还是没有响应,如果想要响应就不能catchstart,还是会内层响应最外层的touchstart逻辑。好在我现在的逻辑start只是做了点触摸初始化,move,end拦下基本上就实现功能。还是很闹心啊,之前也有人问过,官方都没给个回复,再搬出来问问

      2019-06-18
      回复
登录 后发表内容