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