uni-app nvue下.stop修饰符和e.stopPropagation()无效，touchmove事件触发有问题

uni-app nvue下.stop修饰符和e.stopPropagation()无效，touchmove事件触发有问题

示例代码：

<view class="fixed-btn flex-row flex-center" :style="{ bottom: bottom + 'px', right: right + 'px' }"  @click="handleGoQuickAdd" @touchstart="start" @touchmove.stop.prevent="move" @touchend="end">  
  <!--  #ifndef APP-NVUE -->  
  <text class="add icon-add flex-row flex-center"></text>  
  <!--  #endif  -->  
  <!--  #ifdef APP-NVUE -->  
  <text class="add iconfont flex-row flex-center">&#xe767;</text>  
  <!--  #endif  -->  
</view>  

move(e) {  
  let page = e.changedTouches[0]  
  let pageX=parseInt(page.pageX)  
  let pageY=parseInt(page.pageY)  
  console.log(pageX,pageY)  
  let x = pageX-this.pageX  
  let y = pageY-this.pageY  
  this.pageX = pageX  
  this.pageY = pageY  
  if(this.right-x>=0&&this.right-x<=this.w-50) this.right -= x  
  if(this.bottom-y>=0&&this.bottom-y<=this.h-50) this.bottom -= y  
  // #ifdef APP-NVUE  
  e.stopPropagation()  
  // #endif

操作步骤：

可复制以上代码测试

预期结果：

拖动元素无卡顿无跳动效果

实际结果：

元素跳动的很厉害

bug描述：

touchmove时手指按住没有移动但会一直触发touchmove事件
移动的时候touchumove的返回值e.changedTouches[0]里的pageX和pageY会连续返回拖动前和拖动后的值，导致拖动元素不停跳动
这些问题在H5和小程序没有发现，APP-PLUS没有测试，APP-NVUE会有这个问题


更多关于uni-app nvue下.stop修饰符和e.stopPropagation()无效，touchmove事件触发有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue下.stop修饰符和e.stopPropagation()无效，touchmove事件触发有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 中，事件修饰符 .stop 和 e.stopPropagation() 确实存在兼容性问题，这是因为 nvue 的渲染机制与 Webview 不同。针对 touchmove 事件频繁触发导致元素跳动的问题，建议通过以下方式优化：

  1. 使用条件判断控制移动触发：在 move 方法中增加移动阈值判断，避免微小的手指抖动触发移动：
move(e) {
  let page = e.changedTouches[0]
  let currentX = parseInt(page.pageX)
  let currentY = parseInt(page.pageY)
  
  // 设置移动阈值（单位px）
  const minMove = 5
  if (Math.abs(currentX - this.pageX) < minMove && 
      Math.abs(currentY - this.pageY) < minMove) {
    return
  }
  
  // 原有移动逻辑
  let x = currentX - this.pageX
  let y = currentY - this.pageY
  this.pageX = currentX
  this.pageY = currentY
  
  if(this.right - x >= 0 && this.right - x <= this.w - 50) this.right -= x
  if(this.bottom - y >= 0 && this.bottom - y <= this.h - 50) this.bottom -= y
}
  1. 改用 transform 实现位移：直接修改 right/bottom 可能引起布局重计算，使用 transform 性能更好：
// 在 data 中新增 transformX, transformY
this.transformX -= x
this.transformY -= y

// 模板中
<view :style="{ transform: `translate(${transformX}px, ${transformY}px)` }">
回到顶部