js不完美解决click和dblclick事件冲突问题

情况描述
　　当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click。在实际测试中发现，当dblclick的时候，总会出现1次click。下文将要解决的就是这个问题。
情况分析
　　首先我们要清楚click和dblclick的执行顺序，测试过程略，下面是测试结果：
　　click：mousedown -- mouseup -- click
　　dblclick：mousedown -- mouseup -- click -- mousedown -- mouseup -- click -- dblclick
　　由此看来，在dblclick触发之前，实际上是执行了2次click，而第一次的click是会屏蔽掉的（为什么？好把，我也不知道）。
解决方案
　　最先想到的是否可以停止事件，但发现浏览器并未提供相应方法，如果自己去实现难度太大，因为单击事件所关联的行为必须做成是可以被cancel的才行。
　　于是考虑用延迟，也是我唯一能想到的解决办法，利用setTimeout()来延迟完成click事件的处理，然后在需要屏蔽click的时候用clearTimeout()来停止。
具体代码


代码如下:

var test = (function(){
var clickText = 'click<br>';
var dblclickText = 'dblclick<br>';
var timer = null;
return {
click: function(){
clearTimeout(timer);
timer = setTimeout(function(){
$('body').append(clickText);
}, 300);
},
dblclick: function(){
clearTimeout(timer);
$('body').append(dblclickText);
},
init: function(){
$(function(){
$('div').click(test.click).dblclick(test.dblclick);
});
}
}
})();
test.init();

html代码


代码如下:

<div style="width:100px;height:100px;background:red;text-align:center;line-height:33px;-moz-user-select:none;-khtml-user-select:none;user-select:none">click<br>or<br>dblclick</div>

后续
　　文章标题里就说了，是不完美的，因为windows下，控制面板里是可以调鼠标的双击速度的（其他系统不清楚），所以我设置系统设置的双击速度较慢，则上面那个demo就不生效了。所以300毫秒只是一个大概的。
作者：胡尐睿

赞 (0)

相关推荐

  • 导入extjs、jquery 文件时$使用冲突问题解决方法

    1.在最近做项目时,在html页面中,没有导入jquery文件时,可以正常保存,而导入jquery文件后,则不能不存了 经过调试后,发现导入的jquery文件和现有的extjs文件冲突了(原因是$符号的冲突) jQuery与ExtJS之间发生冲突,但是在非IE内核下是可以的,是由于$符号的冲突,解决办法就是把jQuery的$符号用其他来代替,代码如下: 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js

  • js中单引号与双引号冲突问题解决方法

    如何解决js中单引与双引冲突,想下面的这段代码: 复制代码 代码如下: html += ' <a onclick="return removeOpenCss('+e.point.lng+e.point.lat+')">取消</a>'; 这是js中的代码,如果这里这样写的话,会提示js错误,是因为removeOpenCss方法里的参数没有单引或者双引,如果这里,这样写的话: 复制代码 代码如下: html += ' <a onclick="retu

  • onclick和onblur冲突问题的快速解决方法

    onclick和onblur冲突问题的快速解决方法

    新浪首页的搜索框里面有一个使用ajax的下拉框.我们需要实现一个点击下拉框里面的一项,让搜索框里面的值变成这一项,同时下拉框消失的效果,但同时在点击其他地方的时候,这个下拉框也要消失.大致如图: 我们同时使用onblur和onclick来使下拉框隐藏,但是更大的问题出现了,这两个功能相冲突,onblur过于强悍,根本没有onclick方法实现的机会,搜索框无法获取点击项的内容.这个就是我们想要解决的onclick和onblur冲突问题. 对应这个问题,这里我们介绍两种解决办法: 1. 使用set

  • jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br/><br/><div>搜索</div> 想要实现的结果: 1.input框获取焦点时value为"",失去焦点时value为"默认值":-----这个很好实现: 2.当在input框中输入要搜素的内容后,点击div搜索,要求控

  • jquery与js函数冲突的两种解决方法

    如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法 其一: 复制代码 代码如下: jQuery.noConflict(); jQuery(function($) { $("p").click(function() //在函数内继续可以使用jquery类库的$()方法 { alert($(this).text()); }) }) var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$

  • jQuery避免$符和其他JS库冲突的方法对比

    jQuery中需要用到$符号,如果其他js库(例如大名鼎鼎的prototype)也定义了$符号,那么就会造成冲突,会影响到js代码的正常执行.jqeury提供了一些方案来避免这个问题,让我们来看看这几个方案有什么区别 方案1: 引入noConflict(),将$替换为其他符号 复制代码 代码如下: var $j = jQuery.noConflict(); $j(document).ready(function(){ $j("#btn1").click(function(){ aler

  • 解决css和js的{}与smarty定界符冲突问题的两种方法

    当输入url地址后网页出现:Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "E:\wamp\www\cms\system/templates/index.html" on line 79 "$("#job").load("./system/templates/touch/test.php",

  • 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以. click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 <input type="text" id="tel"&g

  • jQuery库与其他JS库冲突的解决办法

    复制代码 代码如下: <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); // Use jQuery via jQuery(-) jQuery(document).ready(function(){ jQuery("div").hide()

  • JQuery的$和其它JS发生冲突的快速解决方法

    众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件.它们也使用$.所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题.现在我们来看看如何解决这个冲突问题.请看下文: 我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去.然后我们可以通过jQuery代替$来获

随机推荐