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>

赞 (0)

相关推荐

  • JS实现双击内容变为可编辑状态

    在一些网站上我们经常看到交互性很强的功能.一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等.. 我在网上查了很多资料,但都有一个小bug,就是当获取焦点后,光标的位置在文本框内容是开始处,这样编辑时还需要用户再重新选择一下光标位置,这样的交互感觉不好:后来查到新的资料解决了此问题,希望可以帮助到更多的人. 代码部分: 注意:设置选择文本的内容或设置光标位置 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • 设置jsf的选择框h:selectOneMenu为不可编辑状态的方法

    1.js代码: 复制代码 代码如下: function init() { document.getElementById("studyPhase").disabled=true; } 2.h:selectOneMenu下拉框 复制代码 代码如下: <h:selectOneMenu id="studyPhase" value="#{schoolfellowInfoEdit.studyPhase}" > <f:selectItems

  • js修改table中Td的值(定义td的双击事件)

    客户需求至上. 这次是更改后的代码,去掉了"确定","取消"按钮.变单击为双击事件,用户按ESC键,取消更改. 复制代码 代码如下: //为每个Td添加双击事件 function ReWritable() { var tbmian=document.getElementById("tbmain"); //循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加. for(var i=1;i<tbmain.row

  • Js实现双击鼠标自动滚动屏幕的示例代码

    如下所示: 复制代码 代码如下: <html><head> <script language="javascript" type="text/javascript">//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){  timer=setInterval("scrollwindow()",30);}function sc(){  clearInter

  • javascript 双击文本框编辑功能代码

    javascript 双击文本框编辑功能代码 input.t {border:1px solid #fff;background:#fff;} input.s {border:1px solid #369;background:#fff;} var test = document.getElementById("test"); var mysubmit = document.getElementById("submit"); test.ondblclick = fu

  • jquery.jstree 增加节点的双击事件代码

    jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • javascript 单选按钮 单击选中 双击取消选择实现代码

    单选按钮,双击取消选中 window.onload = function() { // setRadio("myDiv", "form1", "alreadySelected"); var radios = document.getElementsByTagName("input"); for (var i = 0; i A: B: C: D: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js添加删除行和双击变文本框的脚本

    js添加删除行和双击变文本框---阿会楠练习作品 *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:5px; } #myTable tr td{ padding:5px; } function $(obj){ return document.getElementById

  • js jq 单击和双击区分示例介绍

    一:原理: 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick: 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会.也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果

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

    一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件.开始也觉得不就是给按钮绑下两个事件而已罢了--只是后来才明白,是我想得太简单,在双击事件触发的同时也会触发单击的~囧 通过一番研究后,终于利用JS中"setTimeout"延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • js鼠标单击和双击事件冲突问题的快速解决方法

    情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

  • Android 自定义View实现单击和双击事件的方法

    自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面的线程 3. 自定义一个Handler, 在TouchEventHandler 中 处理 统计到的点击事件, 单击, 双击, 三击, 都可以处理 核心代码如下: public class MyView extends View { ...... // 统计500ms内的点击次数 TouchEvent

  • js实现鼠标单击Tab表单切换效果

    js实现鼠标单击Tab表单切换效果

    本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text

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

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

    先上代码: 复制代码 代码如下: <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function ()

  • jquery单击事件和双击事件冲突解决方案

    jquery单击事件和双击事件冲突解决方案

    本人需要给bootstrap-treeview的树节点添加双击事件.而该插件原生方法中不带双击事件功能.该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突. 编写测试代码 引起冲突的代码: 问题效果展示: 每一次触发双击事件都会引起两次单击事件 解决冲突的代码: 解决问题效果展示: 完美解决单击事件和双击事件冲突问题 这里主要用到两个HTMLDOMWindow对象中函数,settimeout(),clearTimeout() 我这里两个单击事件触发的时间间隔设置在等于300毫秒,

  • javascript实现单击和双击并存的方法

    本文实例讲述了javascript实现单击和双击并存的方法.分享给大家供大家参考.具体分析如下: 在我们进行网页开发的过程中经常会遇到这么一个问题,为一个链接注册双击事件,或者让一个按钮或者其他元素上面同时注册单击或者双击事件,这时候我们发现网页中的双击事件似乎永远都不会起作用,原因是当我们点击一次的时候,就被超链接或者单击事件截获了,本文描述了一个如何解决这个技术问题的具体方法.本解决方案的实现原理是,单击事件和双击事件都调用同一个方法,我们根据两次鼠标点击的间隔时间来判断到底是单击还是双击事

  • 判断“命令按钮”是否被鼠标单击详解

    Click 事件: 此事件是在一个对象上按下然后释放一个鼠标按钮时发生.它也会发生在一个控件的值改变时. 对一个 Form 对象来说,该事件是在单击一个空白区或一个无效控件时发生.对一个控件来说,这类事件的发生是当单击控件对象的特定区域.(推荐学习:JavaScript视频教程) 通常,将一个 Click 事件过程附加到一个 CommandButton 控件,Menu 对象或 PictureBox 控件上用来执行命令或类似命令的操作.对其它可应用的控件来说,使用这个事件来触发一个动作以响应控件中

  • vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 <button class=" btn btn-info" v-on:click="add(1)"> + + </button> <button class=" btn btn-danger " v-on:click="subtract(1)">

随机推荐