vue项目出现错误: Unable to preventDefault inside passive event listener due to target being treated as
目录1 错误2 原因3 解决方法1 错误谷歌浏览器报vue项目的错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.一个组件代码如下,发生图中错误<template><div class = "footerGuid
·
目录
1 错误
谷歌浏览器报vue项目的错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
一个组件代码如下,发生图中错误
<template>
<div class = "footerGuideStyle">
<a href="javascript:;" class = "footerItems" v-bind:class = "{on: isPath('/msite')}" v-on:click = "goTo('/msite')">
<span>
<i class = "iconfont icon-waimai"></i>
</span>
<span>首页</span>
</a>
<a href="javascript:;" class = "footerItems" :class = "{on: isPath('/search')}" @click = "goTo('/search')">
<span>
<i class = "iconfont icon-fangdajing"></i>
</span>
<span>搜索</span>
</a>
<a href="javascript:;" class = "footerItems" :class = "{on: isPath('/order')}" @click = "goTo('/order')">
<span>
<i class = "iconfont icon-order_icon"></i>
</span>
<span>订单</span>
</a>
<a href="javascript:;" class = "footerItems" :class = "{on: isPath('/profile')}" @click = "goTo('/profile')">
<span>
<i class = "iconfont icon-gerenzhongxin1" ></i>
</span>
<span>个人中心</span>
</a>
</div>
</template>
<script>
export default {
methods:{
isPath: function (path) {
return this.$route.path === path
},
goTo: function (path) {
this.$router.replace(path)
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.styl"
.footerGuideStyle
top-border-1px(#999999) // 引入一像素上边框(border-top: 1px solid #999999;)
position fixed //固定定位在底部
left 0
right 0
bottom 0
width 100%
height 3.2rem
display -webkit-flex//弹性布局,实现分四列显示
display flex
margin-bottom 0.2rem
.footerItems
display -webkit-flex
display flex
flex 1
flex-direction column
justify-content center
align-items center
text-align center
margin 0.5rem
color #999999
.on //&指向父选择器
color #317ef3
span
font-size 0.9rem
.iconfont
font-size 1.6rem
</style>
2 原因
chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。
可以参考:csdn里面文章
3 解决方法
方法在参考的博客就有,这里就说自己亲测的方法。我主要是使用vue-cli3做项目,谷歌浏览器用的好像是今年(或者是2019年,反正不是很旧???)版本。然后使用的解决方法就是,在根组件App.vue中的css样式中添加代码
注:如果还没有解决,请找度娘帮忙。
touch-action none
参考
百里于2020年7月2日
如果有错,请您指出!如有侵权,请联系我删除!
更多推荐
已为社区贡献2条内容
所有评论(0)