//事件触发时机 onmousedown->onmouseup->onclick,解决方案:利用down到up的时间差,与200ms作比较
//加入全局指令
onclick-one.js //指令文件名字
import Vue from "vue";
// 解决mousedown和click的冲突
export default Vue.directive("drag", {
inserted(el, binding) {
// console.log(el, binding, 'drag-only_click')
var key = false;
var firstTime = 0;
var lastTime = 0;
el.onmousedown = function () {
el.setAttribute("data-flag", false)
firstTime = new Date().getTime();
console.log("mouseDown")
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
// onmouseup 时的时间,并计算差值
lastTime = new Date().getTime();
if ((lastTime - firstTime) < 200) {
el.setAttribute('data-flag', true)
}
};
}
}
})
//在vue入口main.js中引入
// 引入全局指令
import "./onclick-one.js"; //具体的路径根据自己设置的来引入即可
//然后在对应 组件继续判断
demo.vue
<div @click="onClickMethod" v-dbClick ref="demoRef"></div>
onClickMethod() {
//验证是否为点击事件,是则继续执行click事件,否则不执行
let isClick = this.$refs.demoRef.getAttribute('data-flag')
if(isClick === 'false') {
return
}
// 下面为click事件后所 执行的代码
//逻辑
}
vue中发现 (适合html)鼠标选中文本复制,如果松开时鼠标位于click包裹的文本上会默认执行click事件
于 2022-04-26 22:21:01 首次发布