q***@163.com

发布：2020-01-21 14:16
更新：2023-12-21 11:16
阅读：5011

【报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 负责人:无分享

14 个回复

最佳回复

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

灿发

没有官方人员看下么？同遇到相同问题。
在节点上绑定 @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>