当一个元素同时具有单击和双击事件时,双击时会触发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; charset=utf-8" />
<title></title>
<script type="text/javascript">
var id;
window.onload = function () {
document.getElementById('divdemo').onclick = function () {
//清除的是双击事件的第2次单击事件id
clearTimeout(id);//这句代码放setTimeout下面,也同样将下面的定时器关掉。
id = setTimeout(function () {//不论单双击,每点击一次就会立马产生一个定时器id,产生的id和这个定时器执行与否(什么时候执行)没有关系。
alert(id);//单击操作
}, 300);
//clearTimeout(id);
}
document.getElementById('divdemo').ondblclick = function () {
//清除的是双击事件的第1次单击事件id
clearTimeout(id);
alert(id);//双击操作
}
}
</script>
</head>
<body>
<div id="divdemo" style="width: 400px; height: 400px; background-color: red">
</div>
</body>
</html>

只有单击,

    <script type="text/javascript">
var id;
window.onload = function () {
document.getElementById('divdemo').onclick = function () {
//清除的是双击事件的第2次单击事件id
//clearTimeout(id);//这句代码放setTimeout下面,也同样将下面的定时器关掉。
id = setTimeout(function () {//不论单双击,每点击一次就会立马产生一个定时器id,产生的id和这个定时器执行与否(什么时候执行)没有关系。
alert(id);//单击操作
}, 300);
clearTimeout(id);//只有单击时,只能放这,才会让单击事件不执行
}
}
</script> <body>
<div id="divdemo" style="width: 400px; height: 400px; background-color: red">
</div>
</body>

javascript双击事件取消默认的两次单击事件的更多相关文章

  1. Angular JS中双击事件ng-dblclick避免同时触发两次单击事件ng-click的解决方案

    有些需求中,需要一个元素上既有双击事件,也有单击事件,而两者实现的效果不一样. 这时可以使用ng-dblclick与ng-click来实现需求,但是要避免浏览器将双击事件误认为是两次单击事件,从而出现 ...

  2. jQuery 双击事件(dblclick)时,不触发单击事件(click)

    我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...

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

    单击和双击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown, ...

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

    例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...

  5. jquery双击事件会触发单击事件

    实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...

  6. 一个取消事件的简单js例子(事件冒泡与取消默认行为)

    先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" oncl ...

  7. JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题

    在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...

  8. JS中双击和单击事件冲突解决

    在JS中代码中同一功能块中通常同时会用到单击.双击事件,但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件.此类冲突在ZTree.DHTMLX中经常遇到. 想要解决两 ...

  9. GridView中添加行单击事件.md

    [toc] 1.使用说明 1.方法来源 该方法主要参考StackOverflow上面的答案和下面这篇文章 http://www.codeproject.com/Articles/15677/Click ...

随机推荐

  1. 决策树之C4.5算法

    决策树之C4.5算法 一.C4.5算法概述 C4.5算法是最常用的决策树算法,因为它继承了ID3算法的所有优点并对ID3算法进行了改进和补充. 改进有如下几个要点: 用信息增益率来选择属性,克服了ID ...

  2. Eclipse 中Tomcat 启动 与直接启动Tomcat的区别

    这段时间不用Java 了突然发现在用的时候出问题了. 首先现在Eclipse和Tomcat,解压后 如图1所示: 图1: 进入里面的bin文件目录后发现有 如图2所示包含了startup.bat,st ...

  3. sqlserver临时启用和关闭约束

    select  'ALTER TABLE ['  + b.name +  '] NOCHECK CONSTRAINT ' +  a.name +';' as  禁用约束   from  sysobje ...

  4. Log4Net异常日志记录在asp.net mvc3.0的应用(转载)

    这篇博客写的很好:http://www.cnblogs.com/qianlifeng/archive/2011/04/22/2024856.html 前言 log4net是.Net下一个非常优秀的开源 ...

  5. SQL 查询CET使用领悟

    用到sql的遍历循环查询,如果不考虑用CET,估计又到了自己造轮子的时代了,现在觉得sql的CET确实是个好东西,针对SQL的递归查询,很是不错的方法: with etcRecommandINfo2( ...

  6. PHP定时执行任务的实现

    config.php<?php ; ?> cron.phpignore_user_abort(););*;// 每隔半小时运行 do{ $run = include 'config.php ...

  7. C# 常用正则表达式

    // 匹配移动手机号 @"^1(3[4-9]|5[012789]|8[78])\d{8}$"; // 匹配电信手机号   @"^18[09]\d{8}$";   ...

  8. hdu 4022 STL

    题意:给你n个敌人的坐标,再给你m个炸弹和爆炸方向,每个炸弹可以炸横排或竖排的敌人,问你每个炸弹能炸死多少个人. /* HDU 4022 G++ 1296ms */ #include<stdio ...

  9. HTML <img> 标签的 height 和 width 属性

    定义和用法 <img> 标签的 height 和 width 属性设置图像的尺寸. 提示:为图像指定 height 和 width 属性是一个好习惯.如果设置了这些属性,就可以在页面加载时 ...

  10. iOS经典面试题

    前言 写这篇文章的目的是因为前两天同学想应聘iOS开发,从网上找了iOS面试题和答案让我帮忙看看.我扫了一眼,倒吸了一口冷气,仔细一看,气的发抖.整篇题目30多个没有一个答案是对的,总结这篇面试题的作 ...