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 = "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日

如果有错，请您指出！如有侵权，请联系我删除！