给html元素绑定单击和双击事件

1 直接绑定时 双击函数被触发时 单击函数也会被触发 而且是先被触发两次

    <div class="test" οnclick="test()" οndblclick="dblclickt()">
        click-test
    </div>
    <script>
        function test(){
            console.log('click');
        }
        function dblclickt(){
            console.log('dblclick')
        }
    </script>
//上面的代码将会在控制台输出
   click
   click
   dblclick

为了 让双击时不触发单击的函数可以使用timeout来处理 

    <div class="test" οnclick="test()" οndblclick="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()”  

 

转载于:https://www.cnblogs.com/xhliang/p/11159026.html