屏蔽鼠標事件——避免雙擊觸發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：單擊阻止默認事件