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

创建时间:2016/3/15 10:39
更新时间:2016/3/15 10:45
来源:http://zhidao.baidu.com/question/1495534069472594099.html

<!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>   
<script type="text/javascript" src="/jquery/jquery.js"></script>

<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");           
});       
});   
</script>
</head>
<body>   
<textarea rows="20" cols="50"></textarea><button type="button">提交</button></body></html>




<input type="button" id="submit" value="提交">
<script>
$(document).ready(function(){  
  $("#submit").click(function(){  
    var nowTime = new Date().getTime();
    var clickTime = $(this).attr("ctime");
    if( clickTime != 'undefined' && (nowTime - clickTime < 5000)){
        alert('操作过于频繁,稍后再试');
        return false;
     }else{
        $(this).attr("ctime",nowTime);
        alert('提交成功');
     }       
   });
 });
</script>