zoukankan      html  css  js  c++  java
  • 对一个元素 同时添加单击onclick 和 双击ondblclick 触发冲突的解决

    需求说明:单击列表项内容后,吧啦吧啦,双击列表项内容后,巴拉巴拉巴拉~~~

    解决思路:卧槽 ,其实我是没思路的,当时唯一的想法就是,看个人点击鼠标的速度了,双击快一点,触发双击事件ლ(′◉❥◉`ლ),其实我真的错了因为双击的时候总是触发单击事件  ε=(´ο`*)))唉,真正解决这个问题后,才知道需要弄个延时标志,利用定时器延迟执行onclick事件来实现双击过程中会取消中途触发的单击事件,我这事后诸葛亮也没sei了吧O(∩_∩)O哈哈~5,老规矩 上代码

    代码:

    页面上的调用:

    th:onclick="|dictDetail('${list.name}')|"
    th:ondblclick="|clickRow('${list.id}')|"

    js代码:

    var timeflag = null;  //定义延时标志 强调一点 因为 单击 双击 是在两个方法中, 所以要用到的延时标志只能定义在全局而不能定义在方法中
    function dictDetail(dictName) {
    if(timeflag) {
    window.clearTimeout(timeflag);
    timeflag= null;
    }
      timeflag = window.setTimeout(function(){
      //函数体 你要做的那些事的代码 比如说弹个框啊, ajax去后台啊,各种
      //代码
      //代码
      }, 300); //300是设置的延时

    }

    function clickRow(id) {
    if(timeflag) {
    window.clearTimeout(timeflag);
    timeflag = null;
    }
      //函数体 你要做的那些事的代码 比如说弹个框啊,ajax去后台啊,各种
    }

    简单说明一下:我页面用的是thymeleaf模板,所以onclick 前边会有th 以及后面引号中的竖线。

    总结:做这个功能的时候没想那么多,演示的时候才发现,双击的时候,总是触发单击事件,非手速问题,是我想得简单了,看了各种网上的资料最后才解决。

    大佬链接:https://my.oschina.net/jsan/blog/123181



  • 相关阅读:
    December 23rd 2016 Week 52nd Friday
    December 22nd 2016 Week 52nd Thursday
    December 21st 2016 Week 52nd Wednesday
    December 20th 2016 Week 52nd Tuesday
    December 19th 2016 Week 52nd Sunday
    December 18th 2016 Week 52nd Sunday
    uva294(唯一分解定理)
    uva11624Fire!(bfs)
    fzu2150Fire Game(双起点bfs)
    poj3276Face The Right Way
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/9559297.html
Copyright © 2011-2022 走看看