当一个元素同时具有单击和双击事件时,双击时会触发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. BZOJ 2463: [中山市选2009]谁能赢呢?

    2463: [中山市选2009]谁能赢呢? Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1887  Solved: 1390[Submit][Sta ...

  2. ExecutorService中submit和execute的区别(转)

    在Java5之后,并发线程这块发生了根本的变化,最重要的莫过于新的启动.调度.管理线程的一大堆API了.在Java5以后,通过Executor来启动线程比用Thread的start()更好.在新特征中 ...

  3. check member function

    template<typename T> struct has_member_foo11 { private: template<typename U> static auto ...

  4. java 用socket制作一个简易多人聊天室

    代码: 服务器端Server import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{ ...

  5. Memcache的基本应用

    $mc = new Memcache(); $mc->connect('127.0.0.1', 11211); $sql = "select * from user where id= ...

  6. 持续集成的一些讨论(CI)

    如何保证程序开发的新功能降低BUG,那就是需要他们自己写用测试工具来写测试用例,包括Mocha(JS).Junit(Java).GTest(C++):而上传到SVN或者GIT后,又如何保证能跟原有的功 ...

  7. bootstrap模态框内容替换时会重新触发模态框?&lt;a&gt;标签到底有哪些特殊的特性呢?

    segmentfault提问 这个问题我将bootstrap导航栏的<a>去除就解决了,那么问题来了,<a>标签到底有哪些特殊的特性呢? 主要属性href 链接href 这是一 ...

  8. 微信小程序海报生成功能

    如果是H5页面的话给大家推荐一款不错的插件html2canvas,这个插件可以将html元素转为canvas并一键生成png图片,但是本文的重点是在小程序上如何实现生成图片的功能.因为小程序没有DOM ...

  9. Git入门——远程仓库及分支管理

    关于本地版本库的操作,请见:Git入门--本地版本库操作 本篇提到的所有命令: 小结 前面提到,Git相对于传统的SVN有着很大的优势,其中之一就在于集中式系统中,版本库只能存在于中央服务器上:而在G ...

  10. 关于QT应用在XP系统上兼容运行的问题

    修改兼容XP: 1. 项目属性->配置属性->平台工具集:Visual Studio 2013 - Windows XP (v120_xp) 2. C/C++ 属性-> 代码生成-& ...