uni-app movable-view 在Safari上chang事件不执行

uni-app movable-view 在Safari上chang事件不执行

开发环境 版本号 项目创建方式
Mac 12.1 HBuilderX 
示例代码：

```html
<movable-area>  
    <movable-view  :x="x" :damping="100"  
                direction="horizontal" @change="onChange" @touchend="touchEnd">  
            <view class="blue"></view>  
    </movable-view>  
</movable-area>  

操作步骤：
1、使用vue3编译工程
2、运行在Safari上面
3、拖动movable-view里面的控件  
备注：使用社区里面的图形移动滑块验证码组件就能复现

预期结果：
movable-view的chang事件调用

实际结果：
movable-view的chang事件不执行

bug描述：
movable-view vue3版本 能否支持Safari？
目前在Safari上面不走chang事件，目前在uni-h5.es.js里面的1239行报 ReferenceError: Can't find variable: TouchEvent

更多关于uni-app movable-view 在Safari上chang事件不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

未复现此问题，请升级至HBuilderX3.4.6正式版试下

更多关于uni-app movable-view 在Safari上chang事件不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


嗯，新版本的HBuilder暂时没有发现问题

我跟他的一毛一样 手机movable-view的chang事件调用 不起效果 刷新一下好 但是第一次进去会失效

在 uni-app 中使用 movable-view 时，如果在 Safari 浏览器上 change 事件不执行，可能是由于 Safari 对某些事件的处理方式与其他浏览器不同。以下是一些可能的解决方案和排查步骤：

1. 检查事件绑定

确保你正确绑定了 change 事件。例如：

<movable-view @change="handleChange"></movable-view>

methods: {
  handleChange(event) {
    console.log('Change event:', event);
  }
}

2. 使用 @touchend 事件

如果 change 事件在 Safari 上不触发，可以尝试使用 @touchend 事件作为替代方案。touchend 事件在用户结束触摸时触发，通常可以捕获到 movable-view 的最终位置。

<movable-view @touchend="handleTouchEnd"></movable-view>

methods: {
  handleTouchEnd(event) {
    console.log('Touch end event:', event);
  }
}

3. 检查 Safari 的版本

确保你使用的 Safari 版本支持 movable-view 和相关事件。某些较旧的 Safari 版本可能存在兼容性问题。

4. 使用 @transitionend 事件

如果 movable-view 使用了 CSS 过渡效果，可以尝试使用 @transitionend 事件来捕获变化。

<movable-view @transitionend="handleTransitionEnd"></movable-view>

methods: {
  handleTransitionEnd(event) {
    console.log('Transition end event:', event);
  }
}

5. 检查 movable-view 的配置

确保 movable-view 的配置正确，例如 direction 和 inertia 等属性是否设置合理。

<movable-view direction="all" inertia></movable-view>

6. 使用 @touchmove 事件

如果 change 事件不触发，可以尝试使用 @touchmove 事件来捕获移动过程中的变化。

<movable-view @touchmove="handleTouchMove"></movable-view>

methods: {
  handleTouchMove(event) {
    console.log('Touch move event:', event);
  }
}

7. 检查 Safari 的默认行为

Safari 可能会阻止某些事件的默认行为，导致事件不触发。可以尝试在事件处理函数中调用 event.preventDefault() 来阻止默认行为。

methods: {
  handleChange(event) {
    event.preventDefault();
    console.log('Change event:', event);
  }
}

8. 使用 @animationend 事件

如果 movable-view 使用了 CSS 动画，可以尝试使用 @animationend 事件来捕获动画结束时的状态。

<movable-view @animationend="handleAnimationEnd"></movable-view>

methods: {
  handleAnimationEnd(event) {
    console.log('Animation end event:', event);
  }
}

9. 检查 uni-app 的版本

确保你使用的 uni-app 版本是最新的，因为较新的版本可能修复了某些兼容性问题。

10. 使用 @touchcancel 事件

如果 change 事件不触发，可以尝试使用 @touchcancel 事件来捕获触摸取消时的状态。

<movable-view @touchcancel="handleTouchCancel"></movable-view>

methods: {
  handleTouchCancel(event) {
    console.log('Touch cancel event:', event);
  }
}
回到顶部