onClick和onDblClick并存的两种解决方法

柔光的暖阳◎ 2022-08-13 14:43 189阅读 0赞

一、

var v_Result;
    function OneClick(event) {
        console.log("detail",event.detail);
        //if (event.detail == 2) 
        //	return ; 
        v_Result = false;
        window.setTimeout(check, 300);
        function check() {
            if (v_Result != false) return;
            console.log("单击");
        }
    }
    function TwoClick() {
        v_Result = true;
        console.log("双击");
    }

<input type="button" οnclick="OneClick(event)" οndblclick="TwoClick()" value="点我">

二、

var clickTimer = null;
    function _click() {
        if (clickTimer) {
            console.log("clearTimeout", clickTimer);
            window.clearTimeout(clickTimer);
            clickTimer = null;
        }
    
        clickTimer = window.setTimeout(function() {
            // your click process code here
            console.log("你单击了我");
        },
        300);
        console.log("setTimeout", clickTimer);
    }
    
    function _dblclick() {
        console.log("dblclick");
        if (clickTimer) {
            console.log("=clearTimeout", clickTimer);
            window.clearTimeout(clickTimer);
            clickTimer = null;
        }
    
        // your click process code here
        console.log("你双击了我");
    }

<button οnclick="_click();" οndblclick="_dblclick();">单击或双击我</button>

另外，根据event.detail可以获知是单击还是双击，单击detail值是1，双击值是2。但是双击时，OneClick(event)会被调用两次，第一次detail值是1，第二次值是2

参考：1、[http://my.oschina.net/jsan/blog/123181][http_my.oschina.net_jsan_blog_123181]

2、[http://smartwang.blog.51cto.com/3270660/1415400][http_smartwang.blog.51cto.com_3270660_1415400]

[http_my.oschina.net_jsan_blog_123181]: http://my.oschina.net/jsan/blog/123181
[http_smartwang.blog.51cto.com_3270660_1415400]: http://smartwang.blog.51cto.com/3270660/1415400

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关 JDBC（mysql和Oracle两种方法）

JDBC JDBC API是一个Java API，可以访问任何类型表列数据，特别是存储在关系数据库中的数据。JDBC代表Java数据库连接。 JDBC库中所包含的API

清疚/ 2024年03月31日 15:04/ 0 赞/ 76 阅读

相关 js onclick方法

js onclick方法，方法传参 <!DOCTYPE html> <html> <head> <meta charset="UTF-8

叁歲伎倆/ 2023年10月06日 09:04/ 0 赞/ 80 阅读

相关 SQL解决除以零错误的两种方法

在实际项目中，我们可能会遇到求百分比，比值等带除法的sql语句。这时，我们也许会遇到分母为零的情况。下面给出解决的2种方法： 1. 用NULLIF函数。首先说一

一时失言乱红尘/ 2023年07月11日 08:50/ 0 赞/ 24 阅读

相关线程的两种实现方法和进程的两种实现方法。

线程实现 1. 继承 Thread 类 package com.yuxin.learn; class MyThre

￡神魔★判官ぃ/ 2022年09月24日 14:22/ 0 赞/ 240 阅读

相关 onClick和onDblClick并存的两种解决方法

一、 var v_Result; function OneClick(event) { console.log("detail",event.

柔光的暖阳◎/ 2022年08月13日 14:43/ 0 赞/ 190 阅读

相关八皇后问题的两种解决方法

最近看到递归，原本利用回溯思想解决的经典八皇后问题，其实也是可以用递归解决的~ 八皇后的递归解决思路：从第一行开始，依次判断0~8列的哪一列可以放置Queen，这样就确定

拼搏现实的明天。/ 2022年08月05日 08:22/ 0 赞/ 175 阅读

相关解决URLDownloadToFile缓存问题的两种方法

URLDownloadToFile下载文件前先在本地的缓存中查找此文件如果缓存有则不会再去网上抓最新的文件，所以我们还要解决 URLDownloadToFile缓存的问题

淡淡的烟草味﹌/ 2022年07月11日 09:29/ 0 赞/ 668 阅读

相关 java 解决文件名重复问题的两种方法

[java 解决文件名重复问题的两种方法][java] 在项目开发过程中，在保存文件的时候，通常要考虑文件名重复的情况，一般来说会有两种做法 1.如果文件名不存在，不修改文

冷不防/ 2022年05月29日 09:58/ 0 赞/ 217 阅读

相关 js中onclick事件,可以调用两个方法吗?

js中onclick事件,可以调用两个方法吗? 用分号隔开即可，比如 function a()\{ alert(1); \} function b()\

布满荆棘的人生/ 2022年01月28日 15:45/ 0 赞/ 239 阅读

相关 onclick和onblur冲突问题的解决方法

我们同时使用onblur和onclick来使下拉框隐藏，但是更大的问题出现了，这两个功能相冲突，onblur过于强悍，根本没有onclick方法实现的机会，搜索框无法获取点击项

女爷i/ 2021年09月29日 08:30/ 0 赞/ 551 阅读