uni-app preventDefault和stopPropagation编译成微信小程序无法使用

uni-app preventDefault和stopPropagation编译成微信小程序无法使用

@touchmove=“handleTouchMove($event, index)”

function handleTouchMove(event, index) { if (xxxx) { //代码逻辑 } else { event.preventDefault(); event.stopPropagation(); //代码逻辑 } }

编译成微信小程序后并没有阻止原生事件, 以及事件冒泡

如果使用.stop修饰符, 则无法进行条件判断, 直接给原生事件一刀切了, 导致屏幕无法滚动

而想实现的效果是, 在一些条件下阻止原生事件不让滚动, 另一些条件下是可以滚动的


更多关于uni-app preventDefault和stopPropagation编译成微信小程序无法使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

使用.stop修饰符有什么问题？

更多关于uni-app preventDefault和stopPropagation编译成微信小程序无法使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


使用.stop是写死的, 没办法根据业务动态的阻止冒泡

回复 2***@qq.com: 微信有限制

回复 DCloud_UNI_JBB: 微信小程序没有办法动态的阻止原生事件吗

回复 2***@qq.com: 文档上没找到，你也可以查找一下

回复 2***@qq.com: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#互斥事件绑定 这个能满足你的需求吗？

回复 DCloud_UNI_JBB: 满足不了, 我改成wsx语法吧, 谢谢你啦

小程序的event上没有这两个API，是通过不同的写法来实现的，参考微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#绑定并阻止事件冒泡

在uni-app中，preventDefault()和stopPropagation()在编译到微信小程序平台时确实存在兼容性问题。这是因为微信小程序的事件对象与浏览器标准事件对象不同，缺少这些方法。

解决方案：

  1. 使用.stop修饰符配合条件判断：
@touchmove.stop="handleTouchMove($event, index)"

然后在方法中通过条件控制是否执行后续逻辑：

function handleTouchMove(event, index) {
    if (条件A) {
        return // 阻止默认行为和冒泡
    }
    // 允许滚动的逻辑
}
  1. 使用catch事件绑定：
@touchmove="条件 ? handleTouchMove : ''"
@catchtouchmove="!条件 ? handleTouchMove : ''"

当条件满足时使用普通绑定，不满足时使用catch绑定（自动阻止冒泡）。

  1. 通过CSS控制： 在需要阻止滚动的条件下，给元素添加touch-action: none;样式。

  2. 使用小程序原生写法（需条件编译）：

// #ifdef MP-WEIXIN
// 使用小程序原生事件处理
// #endif
回到顶部