javascript双击和单击事件共存

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
        .quick{
width: 105px;
height: 36px;
background-image: url("ic_cloud_upload_white_24dp.png");
background-repeat: no-repeat;
background-color: black;
cursor:pointer;
        }
        .quick img {
visibility: visible;
position: absolute;
        }

        .quick span {
font-size: 14px;
/*padding-top: 12px;*/
float: right;
color: white;
line-height: 40px;
        }
        //这里为双击文字时,背景色不让其高亮
body{-moz-user-select:none;}//火狐
/*<body onselectstart="return false">*/其他浏览器
</style>
<script type="text/javascript">
var clickTimer = null;
function _click(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
            }

clickTimer = window.setTimeout(function(){
// your click process code here
alert("你单击了我");
            }, 300);
        }
function _dblclick(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
            }
alert("你双击了我");
        }

</script>
</head>
<body >
<div onselectstart="return false" onclick="_click();" ondblclick="_dblclick();" class="quick"><img src="uploading.gif"><span>快捷上传</span></div>
</body>
</html>
 
时间: 2024-08-11 09:53:06

javascript双击和单击事件共存的相关文章

双击和单击事件冲突解决方法

双击和单击事件冲突解决方法:关于单击事件和双击事件,如果单独拿出来都是非常简单,这里也就不多介绍了,具体可以参阅jQuery的click事件和jQuery的dblclick事件一章节,但是如果同一个元素同时绑定了单击事件和双击事件,那么就会造成冲突现象,比如我们双击此元素指向触发双击事件,但是也完全满足单击事件的条件,不但双击事件触发了,单击事件同样也会被触发,下面就通过代码实例介绍一下如何解决它们的冲突问题,代码如下: <!DOCTYPE html> <html> <hea

WPF ListBoxItem双击、单击事件分别处理

1 private void listBox_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 2 { 3 var element = (FrameworkElement)sender; 4 if (e.ClickCount == 1) 5 { 6 var timer = new System.Timers.Timer(500); 7 timer.AutoReset = false; 8 timer.Elapsed += new

javascript双击事件取消默认的两次单击事件

当一个元素同时具有单击和双击事件时,双击时会触发2次单击和1此双击事件. 双击会:先第1次单击 ,同时触发第2次和双击事件. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; ch

Cocos2D-X2.2.3学习笔记8(处理精灵单击、双击和三连击事件)

我们依据上一次介绍的触屏事件和事件队列等知识来实现触屏的单击,双击,三连击事件. 下图为我们实现的效果图: 单击精灵跳跃一个高度, 双击精灵跳跃的高度比单击的高 三连击精灵跳跃的跟高 好了.開始动手吧. 新建项目.删除多余的代码 接着在Classes文件夹下建立两个文件,这里我就命名为Human了 (在Classes上右键加入新建项,选择头文件,名称Human.h,位置浏览到Classes文件夹下) 由于要实现精灵能接受触屏事件,所以我们不能用CCSprite ,须要自己写个类继承CCSprit

javascript对行单击事件处理(委托事件)

我们有时候需要对一行数据做一个单击事件,即点击行中的任意位置都能触发该事件,我遇到的问题是在一个ul标签中的li标签中,当点击行中的任何一个位置时都让有反应进行不同的显示,我这里做了个demo,如果有更好的方法请分享一下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行单击事件</title> <style type="te

单击事件禁用,双击事件跳转

响应式网页设计: 在移动端的时候,通常导航菜单是双击跳转页面,单击事件只显示二级列表. $("a").click(function() { if(限制条件) { if($(this).siblings("ul").length != 0) { return false; //有二级菜单禁用跳转 } } }); $("a").dblclick(function() { window.location.href = $(this).attr(&quo

jquery双击事件(dblclick)时,不触发单击事件(click)

在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click). 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mous

[转]jQuery 双击事件(dblclick)时,不触发单击事件(click)

例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教程 Web Services 系列教程 建站手册 jQuery 教程 jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 效果 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画

JQuery如何实现双击事件时不触发单击事件

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