单击和双击事件的冲突处理示例代码


Posted in Javascript onApril 03, 2014

先上代码:

<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
$(function () { 
$("div").bind("click.a", function () { //单击事件 
$("body").append("<p>click事件</p>"); 
}) 
$("div").bind("dblclick.a", function () { //双击事件 
$("body").append("<p>dblclick事件</p>"); 
}) 
$("div").bind("mouseover.a", function () { //鼠标经过元素的事件 
$("body").append("<p>mouseover事件</p>"); 
}) 
$("div").bind("mouseout.a", function () { //鼠标移出元素的事件 
$("body").append("<p>mouseout事件</p>"); 
}) 
}) 
</script> 
</head> 
<body> 
<div>jQuery命名空间</div> 
</body>

效果如图所示,我双击的同时,会先触发两个单击事件,这是怎么回事?还有,如果我不想在双击的时候触发

单击事件,而仅仅只是触发双击事件,那该怎么解决?我也有试过在双击的时候,先把单击事件解绑,

可这样一来,单击事件又不能用了。。。

单击和双击事件的冲突处理示例代码 

后来在论坛问别人,终于有了答案。那就是使用setTimeout()这个方法设置单击事件的时间间隔,这个时间间隔一般
设为300ms,这样在双击的时候,由于双击的时间间隔小于300ms,所以就不会产生click事件,而仅仅只是产生
dblclick事件。在双击事件里面,需要用clearTimeout()函数清除click事件的处理。代码如下:

<script type="text/javascript" language="javascript"> 
$(function () { 
var timer = null; 
$("div").bind("click.a", function () { //单击事件 
clearTimeout(timer); 
timer = setTimeout(function () { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
$("body").append("<p>click事件</p>"); 
}, 300); }) 
$("div").bind("dblclick.a", function () { //双击事件 
clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理 
$("body").append("<p>dblclick事件</p>"); 
}) 
$("div").bind("mouseover.a", function () { //鼠标经过元素的事件 
$("body").append("<p>mouseover事件</p>"); 
}) 
$("div").bind("mouseout.a", function () { //鼠标移出元素的事件 
$("body").append("<p>mouseout事件</p>"); 
}) 
}) 
</script>

如此,这个问题就解决了!
Javascript 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 #Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 #Javascript
JS获取网页属性包括宽、高等等
Apr 03 #Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 #Javascript
js实现的复制兼容chrome和IE
Apr 03 #Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 #Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 #Javascript
You might like
PHP的PDO常用类库实例分析
2016/04/07 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
对比分析json及XML
2014/11/28 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
win7安装python生成随机数代码分享
2013/12/27 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python requests 测试代理ip是否生效
2018/07/25 Python
详解Django的CSRF认证实现
2018/10/09 Python
python实现猜拳游戏
2020/03/04 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
银行办理业务介绍信
2014/01/18 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL