qq417035570@163.com
qq417035570@163.com
  • 发布:2020-01-21 14:16
  • 更新:2021-01-21 12:08
  • 阅读:1316

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

分类:uni-app

需求:
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 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

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

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

stoneji

stoneji - 如:80后IT男…

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

灿发

灿发

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

灿发

灿发

@DCloud_UNI_GSQ @DCloud_UNI_HT @DCloud_UNI_HDX @DCloud_UNI_WYQ

327544816@qq.com

327544816@qq.com

@DCloud_UNI_GSQ @DCloud_UNI_HT @DCloud_UNI_HDX @DCloud_UNI_WYQ

327544816@qq.com

327544816@qq.com

怎么没有人回复 啊

  • 771747384@qq.com

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

    2021-01-21 12:12

249542247@qq.com

249542247@qq.com

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

@paste="handlePaste"

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

771747384@qq.com

771747384@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>

要回复问题请先登录注册