q***@163.com

发布：2020-01-21 14:16
更新：2024-10-31 17:06
阅读：6371

【报Bug】event.stopPropagation() 和 event.preventDefault() 事件方法无效，求官方大佬帮助

分类：uni-app

uniapp

需求：
1、给根 view 标签绑定 @touchmove 事件
2、在满足一定条件下需要阻止页面的滚动，否则不阻止

查了官方文档发现 @touchmove.stop.prevent （其实只要@touchmove.prevent就行了）

由于uni-app没有禁止页面滚动的方法，所以只能使用 @touchmove.stop.prevent 来替代@touchmove

但是如果使用@touchmove.stop.prevent则没办法实现需求 2、在满足一定条件下需要阻止页面的滚动，否则不阻止

以下的例子均为 @touchmove 事件：

然后又查vue的文档，和控制台查看event的属性时发现，在js中可以通过 event.stopPropagation()达到 .stop 的效果，event.preventDefault() 达到 .prevent 的效果，然后在 if (阻止冒泡的条件) 下面写上了这两个方法，但是，我想多了，uni-app的事件event中虽然有这两个方法，但是调用并没啥用

然后又经过查询，发现可以在事件的回调函数最后写上 if(阻止冒泡的条件) return false 能起到 event.stopPropagation() + event.preventDefault()的效果，然而。。。还是没用！！！！

求官方大佬给点帮忙，让我过个好年吧！！！

还有就是 app js 执行速度实在太慢了，经过我的各种优化，还是略微存在一些卡顿
https://ask.dcloud.net.cn/question/87693

2020-01-21 14:16 负责人:无分享

18 个回复

最佳回复

DCloud_UNI_GSQ

仅浏览器环境可以使用这俩方法

@touchmove.native 即可使用原生事件

野猪佩奇_

APP端view监听@touchmove.native这个事件，监听方法直接都不执行了。上面的问题解决了吗？

2022-01-21 15:44
DCloud_UNI_GSQ

回复野猪佩奇_: App端到视图层操作，相关文档：https://uniapp.dcloud.io/frame?id=renderjs

2022-01-22 11:33

tuonioooo

uni-app 中不支持 @tap.stop  

直接使用原生的  @click.native.stop 或 @tap.native.stop  

以上方法解決一切妖魔鬼怪 其实就是官方遗留的bug

waken

老哥稳！

2022-08-12 10:39
嗨哆嚒

老哥，稳。直接写@click.stop有的地方可以，有的不得行。

2022-09-28 16:29
tuonioooo

回复嗨哆嚒: 官方瞎改的，他们自己都不知道，在做什么，每次一迭代升级就掉链子我不晓得他们干了个啥。

2023-01-27 16:05
tuonioooo

回复嗨哆嚒: 尽量把@click.stop 或 @tap.stop 放到view 标签上防止出现诡异错误。

2023-01-27 16:26

stoneji - 如：80后IT男…

遇到相同的问题，需要通过if(阻止冒泡的条件)来控制是否允许滚动页面，但event.stopPropagation()；event.preventDefault()；return false；都没有任何效果！只能在view上用@touchmove.stop.prevent，才能阻止页面滚动，无法根据条件判断进行阻止。

d***@qq.com

经过反复试验，在app里利用renderjs可以实现按条件preventDefault，大体的思路如下：

vue监听时不设置.prevent
将事件转发到renderjs编写的module中的方法处理
在renderjs module里可以使用document，也就可以调用event.preventDefault，添加原生监听器，也可以直接调用vue定义的业务逻辑

供参考。

3***@qq.com

不行啊老哥不生效

2023-11-30 22:29

4***@qq.com

解决了吗

小蒋啊

请问这个有解决吗？

1***@qq.com - 33

好嘛 20年的问题 24年依旧存在请问楼主解决了吗

j***@163.com

官方解决了吗？

d***@qq.com

下面是一个我们正在使用的案例，完成的功能是长按后选择文本，在App端可行。
在view上绑定事件

<!--解决event.preventDefalut在app端无法生效-->  
<script module="appTouch" lang="renderjs">  
export default{  
  methods:{  
    preventEvent: function (e) {  
      e.preventDefault()  
    },  
    cloneEvent:function(e){  
      let event = {}  
      event.target = e.target  
      event.type =e.type  
      event.timeStamp = e.timeStamp  
      event.detail = e.detail  
      event.currentTarget = e.currentTarget  
      event.changedTouches = e.changedTouches  
      event.touches = e.touches  
      event.preventDefault = e.preventDefault  
      event.stopPropagation = e.stopPropagation  
      return event  
    },  
    bindTouchMove:function(e,ownerInstance){  
      let id = e.currentTarget.id  
      let el = document.getElementById(id)  
      el.addEventListener('touchmove', this.preventEvent, {passive:false,capture:false})  
      let event = this.cloneEvent(e)  
      //调用在vue javascript中定义的a业务函数  
      ownerInstance.callMethod('a',event)  
    },  
    unbindTouchMove:function(e,ownerInstance){  
      let id = e.currentTarget.id  
      let el = document.getElementById(id)  
      el.removeEventListener('touchmove', this.preventEvent, {passive:false,capture:false})  
      let event = this.cloneEvent(e)  
      //调用在vue javascript中定义的b业务函数  
      ownerInstance.callMethod('b',event)  
    },  
  }  
}  
</script>

8***@qq.com

*感谢您提供的解决方案，有效的帮助我解决了

我的理解描述如下：

1.我原来的思路都是想通过 if(逻辑变量){ //允许滚动 } else{允许滚动}，这样在uniapp是无法实施的。

2.我现在通过给 addEventListener去添加或删除 e.preventDefault();，来动态控制页面滚动。

注意：剩下的知识点就是renderjs

2024-11-01 18:07
d***@qq.com

回复 8***@qq.com: 不客气，这次给一个可执行的例子。其中的关键点是通过renderjs捕获事件，让事件不再执行默认的行为。

2024-11-01 19:40

灿发

没有官方人员看下么？同遇到相同问题。
在节点上绑定 @touchmove.stop 就可以阻止冒泡。
如果换成 @touchmove=“handlerMove”，在 handlerMove 中触发 event.stopPropagation() 就不能阻止冒泡。

灿发

@DCloud_UNI_GSQ @DCloud_UNI_HT @DCloud_UNI_HDX @DCloud_UNI_WYQ

3***@qq.com

@DCloud_UNI_GSQ @DCloud_UNI_HT @DCloud_UNI_HDX @DCloud_UNI_WYQ

3***@qq.com

怎么没有人回复啊

7***@qq.com

可以看看我的答案哦，应该可以变通的做到

2021-01-21 12:12
w***@126.com

回复 7***@qq.com: 我试了，会导致页面数据出现错乱

2021-10-06 14:03

2***@qq.com

在vue里，event.preventDefault();是有效的

@paste="handlePaste"

handlePaste(event) {
// 阻止原生粘贴事件
event.preventDefault();
}

7***@qq.com

问题：如何控制页面滚动？
方案：可以加一个遮罩，当需要禁止滚动时，启用遮罩即可。
示例代码：

<template>  
    <view style="min-height:100vh;background-color:#fff;color:#000;overflow-y: hidden;">  
        <view style="margin:20rpx;margin-left:40rpx;margin-right:40rpx;">  
            <text>{{content}}</text>  
        </view>  
        <view v-show="!canPageScroll" style="position: absolute;top:0;left:0;z-index:10000;" @touchmove.stop.prevent="()=>{return;}"><text  
             style="visibility:hidden;">{{content}}</text></view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                content: "",  
                ///////////////  
                canPageScroll: true,//控制页面滚动  
                startAllowScroll: 0,  
            }  
        },  
        methods: {},  
        onLoad(options) {  
            this.content = getApp().globalData.customizeFileViewerContent;   
        },  
        onPageScroll(e) {  
                        //禁止页面频繁触摸导致滚动白屏  
            if (this.startAllowScroll === 0) {  
                this.canPageScroll = false;  
                this.startAllowScroll = setTimeout(() => {  
                    this.canPageScroll = true;  
                    clearTimeout(this.startAllowScroll);  
                    this.startAllowScroll = 0;  
                }, 2000);  
            } else {  
            }  
        }  
    }  
</script>