q***@163.com
q***@163.com
  • 发布:2020-01-21 14:16
  • 更新:2022-06-18 17:05
  • 阅读:3114

【报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 即可使用原生事件

  • 大表哥_

    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

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

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

3***@qq.com

3***@qq.com

@DCloud_UNI_GSQ @DCloud_UNI_HT @DCloud_UNI_HDX @DCloud_UNI_WYQ

3***@qq.com

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

2***@qq.com

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

@paste="handlePaste"

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

7***@qq.com

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>
w***@163.com

w***@163.com

有人解决没,坑了一上午了

大表哥_

大表哥_

APP环境里要怎么使用event.preventDefault()?还是无效啊,没看懂

要回复问题请先登录注册