鼠标双击或触摸双击事件检测jQuery插件

当前位置:主页 > jQuery库 > 工具类 > 鼠标双击或触摸双击事件检测jQuery插件
鼠标双击或触摸双击事件检测jQuery插件
分享:

    插件介绍

    jQuery-doubleTap是一款非常有用的鼠标双击事件或移动设备的触摸双击事件检测jQuery插件。该插件通过对“click”和“touch”的简单代码优化来实现鼠标双击或触摸双击事件的检测

    浏览器兼容性

    浏览器兼容性
    时间:2016-04-11
    阅读:
简要教程

jQuery-doubleTap是一款非常有用的鼠标双击事件或移动设备的触摸双击事件检测jQuery插件。该插件通过对“click”和“touch”的简单代码优化来实现鼠标双击或触摸双击事件的检测。

使用方法

要检测双击事件需要在页面中引入jQuery和jquery-doubleTap.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery-doubleTap.js"></script>                  
                
初始化插件

jquery-doubleTap.js的实现代码非常简单:首先判断是鼠标点击事件还是触摸点击事件,同时设置一个开关变量active。然后为元素绑定相应的事件(鼠标事件或触摸事件),在事件中判断active是否为true,如果是则执行绑定事件的回调函数,否则在3.5毫秒时间内将active设置为true,这意味着如果用户在3.5毫秒时间内再次按行鼠标或触摸点击,双击事件就会被触发。

(function($) {
  
  $.fn.doubleTap = function(callback) {
    
    var active, interaction;
    
    active = false;
    interaction = ("ontouchend" in document) ? "touchend" : "click";
      
    $(this).on(interaction, function() {
      
      if (active) {
        callback();
        return active = false;
      }
      
      active = true;
      
      setTimeout(function() {
        active = false;
      }, 350);
      
    });
    
    return this;
  };
  
}(jQuery));
                

实际使用中可以为DOM元素绑定doubleTap()方法,如果是鼠标双击或触摸双击时执行相应的回调函数代码:

$(selector).doubleTap(function() {
    $(selector).css("background", "#f00");
});                  
                

jQuery-doubleTap插件的github地址为:https://github.com/dzervoudakes/jQuery-doubleTap

网友评论