zoukankan      html  css  js  c++  java
  • 双击和单击事件冲突解决方法

    双击和单击事件冲突解决方法:
    关于单击事件和双击事件,如果单独拿出来都是非常简单,这里也就不多介绍了,具体可以参阅jQuery的click事件jQuery的dblclick事件一章节,但是如果同一个元素同时绑定了单击事件和双击事件,那么就会造成冲突现象,比如我们双击此元素指向触发双击事件,但是也完全满足单击事件的条件,不但双击事件触发了,单击事件同样也会被触发,下面就通过代码实例介绍一下如何解决它们的冲突问题,代码如下:

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title> 
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
      var timer=null; 
      $("#bt").bind("click",function(){
        clearTimeout(timer); 
        timer=setTimeout(function(){
          $("#thediv").append("单击事件触发"); 
        },300); 
      }) 
       
      $("#bt").bind("dblclick",function(){
        clearTimeout(timer);
        $("#thediv").append("双击事件触发"); 
      }) 
    }) 
    </script> 
    <body>
    <div id="thediv"></div>
    <input type="button" id="bt" value="查看效果"/>
    </body>  
    </html>
    复制代码

    以上代码实现解决了单击和双击冲突的现象,单击或者双击按钮的时候只会有一个事件触发。
    一.实现原理:
    原理其实及其简单,就是延迟单击事件处理函数中相关代码的执行(当然并不是说单击事件没有触发),也就是当第一次点击按钮的时候,如果300毫秒内没有点击第二次,那么就认为这是一次单击事件,然后执行相关的代码,如果300毫秒内又点击了第二次,那么就会取消定时间函数的执行,单击事件处理函数中的相关代码将不会被执行,只会执行双击事件处理函数中的代码。
    二.相关阅读:
    1.bind()可以参阅jQuery的bind()方法一章节。
    2.clearTimeout()函数可以参阅window对象的clearTimeout()方法一章节。
    3.setTimeout()函数可以参阅window对象的setTimeout()方法一章节。 
    4.append()函数可以参阅jQuery的append()方法一章节。

    原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13135

  • 相关阅读:
    Redis 简介
    图片懒加载、selenium和PhantomJS
    Python网络爬虫之三种数据解析方式
    Scrapy框架之CrawlSpider
    Scrapy 框架
    python 网络爬虫概念与HTTP(s)协议
    Mysql概念及基本操作
    Python re 模块
    线程与进程应用场景
    全局解释器锁 GIL
  • 原文地址:https://www.cnblogs.com/refe/p/5156618.html
Copyright © 2011-2022 走看看