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;