Vue中的ios多次触发@click事件

发表于   |   分类于 ，   |  

最近在学习Vue其中一个组件需要用到@click事件。

发现一个很有趣的一点。使用v-for渲染出来的元素,在Ios下面会触发两次click事件,有时候在PC端也会出现这个BUG。

例子如下

例子
其中在PC上面和ios上面有时候会出现多次触发@click事件的情况。

原因：

原本以为是事件冒泡，所以加上了，event.stopPropagation(); 没生效。仔细想了下，这种情况只在ios上有问题，android是好的，所以猜测是和ios兼容性有关。最终想到了ios上的点击延迟300ms。（这个不确定。具体还要讨论）

解决办法。

  • 1.使用过滤器过滤
    把代码改成下面这样

    1
    <div class="cart-add icon-add_circle" @click="Addfoods($event)|debounce 0">

  • 2.判断是否存在e._constructed。
    先判断是否存在e._constructed

    1
    2
    3
    4
    5
    这里需要优先判断。是否存在`e.constructed`,如果存在 只需要 return 返回即可

    if(!e._constructed){
        return;
    }