屏蔽鼠标事件——避免双击触发2次单击或单击触发事件冒泡

背景：

问题1.单击过快或使用双击后，会优先触发单击动作，可能出现执行多次单击动作，而规避方案就是：当出现双击动作时，不执行任何单击动作。

问题2.单击父元素，触发了子元素的单击动作：停止当前节点及所有后续节点的同类事件

问题3.右键触发了浏览器的右键菜单，如果屏蔽：父元素阻止冒泡事件

问题1的解决方案：

方案1：

var flag = true;
function clickHandle(e) {
    e = e || window.event;
    if (flag) {
        flag = false;
        //此处为要执行的函数；
        setTimeout(function() {
            flag = true;
        }, 250)
    } else {
        e.preventDefault();
    }
}

方案2：

var timer = null;
function clickHandle(e) {
    clearTimeout(timer);
    timer = setTimeout(function() { //初始化一个延时
        //此处为要执行的函数；
        // console.log(e);
    }, 250)
};
function dblclick() { //双击事件会先触发两次单击事件，然后再执行双击事件，使用清除定时器来达到双击只执行双击事件的目的
    clearTimeout(timer);
    console.log("2");
};

 问题2的解决方案：

<div :style="styleObject" @click="intercept($event)">
    <el-menu v-show="menuSelected" style="border-radius: 10%;width: 100%;" @select="onMenuSelect">
        <el-menu-item style="border-radius: 10%;border: 1px solid #ccc;height: 40px;line-height: 40px;" v-for="(v,index) in rightMenuList"
         :key="index" :index="v.value">{{ v.name }}</el-menu-item>
    </el-menu>
</div>

intercept (e) { // 阻止受到其他事件的触发
  e.stopImmediatePropagation()
}

 问题3的解决方案：

<div @click="handleClick" @contextmenu.prevent="handleContextmenu">

        <!-- 阻止事件冒泡 button冒泡到div上面去了-->
        <div @click="show(msg,$event)"> <button @click.stop="show(msg,$event)">点击我</button> <a href="https://www.baidu.com" @click.prevent.stop="show(msg,$event)">百度</a> </div>

</div>

说明：

@contextmenu.prevent : 右键阻止冒泡事件

@click.stop：单击阻止默认事件

转载于:https://www.cnblogs.com/wheatCatcher/p/11268793.html