Vue高仿饿了么实战项目给使用了btter-scrollde DOM元素绑定click事件的问题

Vue怎样给DOM 元素绑定事件

通过v-on:eventName="fnName"或者@eventName="fnName";

DOM元素使用better-scroll

对于使用了better-scroll插件的DOM元素在给其子元素绑定点击事件时，需要添加配置项click: true;

原因

better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。

参考：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#click

问题描述

当页面是处于PC调试模式时，点击事件会执行两次，处于移动模式则只执行一次；

问题原因

在PC模式时，浏览器原生的click事件会执行，而better-scroll的点击事件也会执行，故PC模式下会执行两次click事件；

解决方案

在绑定的方法中将$event作为参数传入，并在我们自己派发的事件执行时，阻止浏览器默认的事件执行；

template

解决方法

script

$event与浏览器原生的event的属性区别

$event有一个_constructed属性，浏览器原生的event对象则没有该属性；

我们自己派发事件时$event._constructed为true；