元素的click与dblclick
JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,是用户或浏览器自身执行的某种动作。诸如click、load、mousemover,都是事件的名字。可以使用侦听器来预订事件,以便事件发生时,执行相应的代码。而响应某个事件的函数就叫做事件处理程序。对于一个事件,DOM元素通常拥有事件方法属性和事件处理程序属性,如click方法和onclick属性。
在DOM0级规范中,通过JavaScript制定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。如:
var btn = document.getElementById('myBtn');
btn.onclick = function(){
console.log('click');
}
DOM2级规范中,制定事件处理程序的方式,使用addEventListener函数,如:
var btn = document.getElementById('myBtn');
btn.addEventListener('click', function(){
console.log('click');
}, false);
看过以上基础之后,开始步入主题。大部分元素都支持click与dblclick,然而在实际工作中,发现这两个事件之间绑定与触发方式还是有很多不同。
1、通过以上两种来绑定的click事件,都可以通过在代码中调用element.click()方法来触发。而对于dblclick,我发现元素都没有dblclick方法。

2、对于click想要在代码中触发click事件,有两种选择:第一,直接调用元素的click方法。第二,使用自己定义事件。对于dblclick,如果想要利用代码触发dblclick,只能使用自定义事件的方式。

在某些情况下,我们可能有想利用单击模拟双击的需求,这种需求分为两种:
1、同正常绑定dom元素的触发顺序一致,当用户点击一下时,触发click事件,当用户在极短时间内点击两下时,触发顺序为click-click-dblclick:

2、当用户单击时,触发click。当用户在极短时间内双击时,只触发dblclic:

这种处理方式有一个缺点:当用户单击时,会延迟一段时间,然后触发单击事件
元素的click与dblclick的更多相关文章
- dblclick([[data],fn]) 当双击元素时,会发生 dblclick 事件。
dblclick([[data],fn]) 概述 当双击元素时,会发生 dblclick 事件.大理石量具哪家好 当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click.在很短的 ...
- jQuery - 同时添加click和dblclick事件
添加事件的代码比较简单,有两种方法: $("abc").bind({"click":fn,"dblclick":fn}); $(" ...
- html 子元素和父元素都监听了 click 事件,点击子元素时为何先触发的是父元素的 click 事件?
先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...
- 给DOM元素绑定click事件也有学问
最简单的莫过于使用click方法: 1 <input id="btn" type="button" value="BUTTON" on ...
- 如何通过js在子页面调用父页面元素的click事件
//获取父页面的某个元素var node = window.parent.document.getElementById("btnReturn");//调用该元素的Click事件 ...
- google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决
Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...
- click([[data],fn]) 触发每一个匹配元素的click事件。
click([[data],fn]) 概述 触发每一个匹配元素的click事件. 这个函数会调用执行绑定到click事件的所有函数.大理石平台精度等级 参数 fnFunctionV1.0 在每一个匹配 ...
- 【转】jQuery - 同时添加click和dblclick事件
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- JQuery给元素绑定click事件多次执行的解决方法
原绑定方法: $(".subNavdiv").click(function () { ###### }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为 ...
随机推荐
- HP-SOCKET TCP/UDP通信框架库解析
项目概述: HP-SOCKET是一套通用TCP/UDP通信框架,包括服务器.客户端.Agent组件:其目标是提供高性能.通用性.简易性.可扩展.可定制: 鉴于此,其仅实现基本的通用框架通信.数据收发功 ...
- Breakpad Google的crash捕获、抓取开源库
简介: Breadpad为google chrominum项目下用于处理dump的一套工具:内部采用跨平台方式实现捕获.生成.解析与平台无关的dump,便于统一处理:支持进程内与进程外捕获,当为进程外 ...
- php转化IP为整形
<?php function a($ip){ $intIP = ip2long($ip); return $intIP; } function b($intIP){ $IPStr = long2 ...
- 基本术语表【WF】
术语 定义 activity(活动) Windows Workflow Foundation 中的程序行为单元. 可将单个活动组合在一起,形成更复杂的活动. activity action(活动操作) ...
- 【虚拟机】在VMware中安装Server2008之后配置网络连接的几种方式
VMware虚拟机的网络连接方式分为三种:桥接模式.NAT模式.仅主机(Host Only) (1)桥接模式 桥接模式即在虚拟机中虚拟一块网卡,这样主机和虚拟机在一个网段中就被看作是两个独立的IP地址 ...
- [Noip2016]蚯蚓 D2 T2 队列
[Noip2016]蚯蚓 D2 T2 Description 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳 蚤国的跳蚤也拿蚯 ...
- 苹果safari浏览器window.open问题
现象:在做项目的过程中,使用window.open打开新窗口,在windows系统的ie,firefox,chrome浏览器上测试均没有问题,在苹果系统的safari浏览器上发现有些window.op ...
- 浅谈我对 jQuery 的了解
总述 0 获取 jQuery 对象 1 对象跳转 2 方法调用 3 常用API 4 $(…); 5 jQuery 对象获取 6 Data 相关方法 7 选择器 8 基本的过滤器 9 内容过滤选择器 1 ...
- VS2013开启滚动条缩略图和双击选中高亮,效果杠杠滴!
1.双击代码或选中代码高亮,用以下插件,反应很灵敏,我安装的是第三个 2.代码编辑器的滚动条缩略图是VS自带的,需要打开菜单----工具----选项,如下图设置: 3.VS默认的选中颜色,需要打开菜单 ...
- Oracle Database 创建HR模式
其实Oracle是自带演示模式的,我还一直在跪舔外面的培训机构的sql文件 首先以system 用户登陆SQL 输入: alter user hr account unlock identified ...