脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS 双击事件

JS实现鼠标单击与双击事件共存

 更新时间：2014年03月08日 10:03:30   作者：  
本篇文章主要是对JS实现鼠标单击与双击事件共存的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

一直都认为在Web开发中，双击事件都是少至又少地使用，直到最近项目需要，要在一个按钮上绑定单击与双击两件事件。开始也觉得不就是给按钮绑下两个事件而已罢了……只是后来才明白，是我想得太简单，在双击事件触发的同时也会触发单击的~囧

通过一番研究后，终于利用JS中“setTimeout”延时执行方法的办法，将单击延迟300毫秒执行才解决了，代码如下：

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>   
<title></title>   
<mce:script src="jquery-1.6.min.js" mce_src="jquery-1.6.min.js" type="text/javascript"></mce:script>   
<mce:script type="text/javascript">
<!--       
$(function () {           
var num = 0;           
var timeFunName = null;           
$("button").bind("click", function () {               
// 取消上次延时未执行的方法               
clearTimeout(timeFunName);               
// 延时300毫秒执行单击               
timeFunName = setTimeout(function () {                   
num++;                   
$("textarea").val($("textarea").val() + "第" + num + "次事件，事件名：单击/n");               
}, 300);            }).bind("dblclick", function () {               
// 取消上次延时未执行的方法               
clearTimeout(timeFunName);               
num++;               
$("textarea").val($("textarea").val() + "第" + num + "次事件，事件名：双击/n");           
});       
});   
// --></mce:script>
</head>
<body>   
<textarea rows="20" cols="50"></textarea><button type="button">提交</button></body></html>

您可能感兴趣的文章:

相关文章

  • 基于JavaScript实现弹出框效果

    基于JavaScript实现弹出框效果

    弹出框在网站页面中是必不可少的一部分，今天借助脚本之家平台给大家分享使用js实现简单的弹出框效果，感兴趣的朋友一起学习吧
    2016-02-02
  • JavaScript简写技巧

    JavaScript简写技巧

    这篇文章主要介绍了JavaScript简写技巧，运用简写技巧，可以加快开发速度，让开发工作事半功倍，大家感兴趣的话可以参考本篇文章
    2021-08-08
  • 简单实用的HTML到UBB转换脚本工具实现说明

    简单实用的HTML到UBB转换脚本工具实现说明

    你也许是位乐于分享的技术人员，尽管你算不上什么技术高手，但是你都希望把自己所知道的通过博客与网友分享。为了让更多人知道你的经验，你可能会努力把博文发布到专业论坛。
    2009-11-11
  • IE关闭时判断及AJAX注销案例学习

    IE关闭时判断及AJAX注销案例学习

    当关闭系统时会提示:你确定要退出系统吗？退出请按'离开此页'接下来将讲解下IE关闭判断及AJAX注销，感兴趣的你可不要错过了哈，希望本例对你学习ajax有所帮助
    2013-02-02
  • JavaScript+Canvas创建一个独特的字符画生成器

    JavaScript+Canvas创建一个独特的字符画生成器

    这篇文章主要介绍了如何使用 Canvas 和 JavaScript 创建一个独特的字符画生成器,通过此生成器,我们可以将图片转换为由字符构成的作品,感兴趣的可以了解下
    2024-01-01
  • 关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别

    关于js中window.location.href,location.href,parent.location.href

    关于js中window.location.href,location.href,parent.location.href,top.location.href的用法
    2010-10-10
  • js如何实现淡入淡出效果

    js如何实现淡入淡出效果

    这篇文章主要介绍了原生js如何实现淡入淡出效果，文章为大家提供了一个已经封装好的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • ES6学习笔记之let、箭头函数和剩余参数

    ES6学习笔记之let、箭头函数和剩余参数

    ES6为我们在函数的使用上也提供了许多的便捷的东西,下面这篇文章主要给大家介绍了关于ES6学习笔记之let、箭头函数和剩余参数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 五步轻松实现JavaScript HTML时钟效果

    五步轻松实现JavaScript HTML时钟效果

    这篇文章主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JS返回只包含数字类型的数组实例分析

    JS返回只包含数字类型的数组实例分析

    这篇文章主要介绍了JS返回只包含数字类型的数组实现方法,结合实例形式分析了循环遍历数组及正则匹配两种实现技巧,需要的朋友可以参考下
    2016-12-12

最新评论