給html元素綁定單擊和雙擊事件

1 直接綁定時 雙擊函數被觸發時 單擊函數也會被觸發 而且是先被觸發兩次

    <div class="test" onclick="test()" ondblclick="dblclickt()">
        click-test
    </div>
    <script>
        function test(){
            console.log('click');
        }
        function dblclickt(){
            console.log('dblclick')
        }
    </script>
//上面的代碼將會在控制台輸出
   click
   click
   dblclick

為了 讓雙擊時不觸發單擊的函數可以使用timeout來處理 

    <div class="test" onclick="test()" ondblclick="dblclickt()">
        click-test
    </div>
    <script>
        var time = null;
        function test(){
            clearTimeout(time);  //首先清除計時器
            time = setTimeout(() => {
                console.log('click');
            },300);
        }
        function dblclickt(){
            clearTimeout(time);
            console.log('dblclick')
        }
    </script>

　　

在vue中綁定可以同樣的使用 該方法

@click="clicktest()" @dblclick="test()"

let time2 = null;
export default { 
    data(){},
    methods:{
        test(){
            time2 && clearTimeout(time2);
            console.log('dblclick test')
        },
        clicktest(){
            time2 && clearTimeout(time2);
            time2 = setTimeout(()=>{
                console.log("click")
            },300)
        }
    }
}

　　

也可以通過修飾符 2.5.0 新增的 .exact 等或者.ctrl 等來綁定不同的函數 如：

@click.exact ="clicktest()" @dblclick.exact ="test()" 

@click.exact = ‘’     //表示只單擊時

@click.ctrl.exact = ‘’     //表示按住ctrl單擊時

但是即使有.exact也需要timeout來配合使用

 

但是 值得注意的是：

在vue中 給普通的元素 綁定click事件 若使用.native修飾 符，該點擊事件將不起作用，即@click.native="myClick()"  @dblclick.native="myClick()" 點擊時不會觸發myClick函數

而在自定義的組件上綁定點擊函數可以使用 @click.native=“myClick()”