<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ alert(1); }).dblclick(function(){ $("p").slideToggle(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>请双击此处</button> </body> </html>
上面的代码中双击操作不会触发动作。每次都出发click操作。
下面转载一下其他人怎么解决的方法:
在jQuery事件绑定中,dbclick可以触发两次click事件。例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情。事件处理上没有冲突,都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来禁止或者说屏蔽这次多余的 click 事件呢?本文将提供给您一个比较好的解决办法。
产生原理分析
首先,来了解一下点击事件发生的先后顺序:
单击:mousedown, mouseup, click
双击:mousedown, mouseup, click, mousedown, mouseup, click, dblclick
由此看来,dblclick 事件发生之前,实际上发生了两次 click 事件。其中,第一次的 click 是会被屏蔽掉,但是第二次则不会,所以就出现在双击的时候,也触发 click 事件。
解决办法
知道了原因,接下来自然就是想办法把这次 click 给屏蔽掉,但是由于各浏览器均未提供直接去停止事件的方法,所以值得改变思路。
由于我们只需要屏蔽一次 click 事件即可,由此联想到,可以利用 setTimeout() 方法来延时完成 click 事件的处理,在需要停止 click 的时候利用 clearTimeout() 方法停止这一事件的处理。这样,就可以比较容易的写出如下的 javascript 代码:
var timer = null; function do_click(event) {
clearTimeout(timer); // 这里加一句是为了兼容 Gecko 的浏览器 /
if (event.detail == 2)
return ;
// 同上句的作用
timer = setTimeout(function() {
// click 事件的处理
}, 300); }
function do_dblclick(event) {
clearTimeout(timer);
// dblclick 事件的处理
}
问题总结
从测试结果来看,如果前后两次点击的时间在 300ms 左右的时候,还是很容易出现 click 和 dblclick 事件被“同时”调用的情况,而如果间隔的时间更短或更长,则只会有 click 或 dblclick 事件。
所以,应该说这个方法已经在很大程度上,避免了 click 和 dblclick 事件的“同时”存在问题。当然,它还没有达到完全解决的程度。
注意
windows 的控制面板里是可以调鼠标的双击速度的(Linux 等系统下能不能调,俺就不清楚了),这点对于程序还是有一定影响,大家可以自己调节下试试看~
经过测试,延时 300ms 是一个比较理想的事件,既考虑到对鼠标操作并不十分顺利的朋友,也兼顾 click 事件的响应速度
以上代码,只在 IE6、FF3、Chrome 中测试过,并未出现问题
w3c标准是没有dblclick的,而是通过event.detail来判断是单击或双击
转自:http://www.veryhuo.com/a/view/26382.html
相关推荐
通过事件所包含的MouseEventArgs 对象,可以获取鼠标数据. 从逻辑上来说,由于比MouseDoubleClick 描述更抽象,DoubleClick 事件是控件的更高级别的事件, 事件引发的顺序: MouseDown 事件。 Click 事件。 MouseClick ...
C# Button是有DoubleClick事件的,只是它没有出现在事件列表中,而且.net也是把这个事件给"屏蔽" 掉了,无论你双击一个按钮怎么快,也不会触发这个事件。 为了能够触发C# Button的双击事件,我们可以重载...
flex datagrid 的doubleclick实例,选择一个行的数据,获得选择的数据其做一些其他操作,具体分析参考相关博客:http://blog.csdn.net/fansy1990
doubleclick-core模块包含DoubleClick的RTB模型以及相关的功能,例如加密和元数据。 第二个模块doubleclick-openrtb提供DoubleClick的模型/协议和OpenRTB之间的客户端映射以及验证支持。 请参阅我们的入门! 将...
例如,mousemove、keydown、click、doubleclick 都是事件类型。 目标事件发生的对象。 例如,一个元素、一个窗口可以是事件目标。 处理程序触发事件时调用的函数。 每个事件都有一个事件对象,该对象具有一组与...
generator-doubleclick-studio 的生成器,该生成器支持Doubleclick Studio HTML5广告入门什么是Yeoman? 技巧问题。 没关系是这个人: 基本上,他戴着顶帽子,住在您的计算机中,然后等待您告诉他您希望创建哪种应用...
不使用此类机制,Chrome Extensions无法接收选项卡事件。谷歌的扩展名为Chrome Toolbox。至于那个家伙问我为什么chromeplus可以做到这一点 - 答案的简单,chromeplus不是chrome。它也有额外的二进制代码,而不是谷歌...
DoubleClick_maps
gridview中的DoubleClick事件可能无法正常响应,这里列举了三种方法触发双击列表行事件
Google Analytics 和 Doubleclick Campaign Manager API 客户端 目前可用的功能: Doubleclick Campaign Manager:运行 DCM 报告并将其下载为 csv 文件 Google Analytics:获取自定义数据源列表上传自定义数据 安装...
本机保险丝Open Brightcove Player,带有DoubleClick视频广告它是BrightCove Video Player和Preroll DoubleClick Video Ads(具有跳过支持)的本地实现。 这是一种初始方法,有些事情需要改进或重构,但是此初始版本...
批量下载Google DoubleClick资产库页面上的所有项目。 使用DoubleClick资产下载器,您可以一次轻松地从多个文件夹中下载Google DoubleClick资产。 使用方法:1.选中要下载的DoubleClick Studio上这些文件夹中的所有...
如果不使用这种机制,Chrome扩展程序将无法接收标签事件 Google的扩展程序称为Chrome工具箱。至于那个问我为什么ChromePlus可以做到的人-答案很简单,ChromePlus不是Chrome。它也有额外的二进制代码,不是Google提供...
资源分类:Python库 所属语言:Python 资源全名:tap-doubleclick-campaign-manager-0.2.3.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
我想到了如下方法,即创建一个Timer控件(以下名为timer_singleclick),一旦单击发生,就自动启动Timer的Tick事件(timer_singleclick_Tick(object sender, EventArgs e)),一定时间后,若没有第二次点击发生,则执行...
当单击和双击具有不同的功能时,这种效果是不可取的! useDoubleClick()在单击后等待二次单击的延迟窗口内,并且只有在此期间之后onSingleClick或onDoubleClick()回调才会触发一次。 安装 yarn add use-double-...
import DoubleClick from 'rn-double-click' export default class App extends React . Component { dbclick ( ) { Alert . alert ( 'Double Click Succeed' ) ; } render ( ) { retu
放大网站。双击此页面上的任何元素以放大并再次双击,或者使用ESC缩小。 支持语言:English
鼠标疑似双击检测,