JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
本文实例讲述了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法。分享给大家供大家参考,具体如下:
最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下:
<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; } // your click process code here alert("你双击了我"); } </script> <button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>
处理思想就是:利用定时器延迟执行onclick事件,这样在双击过程中会取消中途触发的单击事件。
PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
Javascript中绑定click事件的四种方式介绍
一:HTML中添加onclick <button id="vv" onclick="myfunction()" >哈哈</button> 二:JS中定义函数绑定事件! var funcc = function () { alert('我爱编程') } var aa = document.getElementById('vv') aa.onclick = funcc 三:直接定义函数与内容 document.getElementById('vv
-
JS基于onclick事件实现单个按钮的编辑与保存功能示例
本文实例讲述了JS基于onclick事件实现单个按钮的编辑与保存功能.分享给大家供大家参考,具体如下: 该实例可以实现点击同一个按钮实现编辑和保存的功能: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q
-
Angularjs为ng-click事件传递参数
在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:
-
vue.js添加一些触摸事件以及安装fastclick的实例
安装fastclick.js npm install fastclick -D 之后,在main.js中引入,并绑定到body import FastClick from 'fastclick' //vue框架开发H5正确运用fastclick if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body
-
JavaScript中click和onclick本质区别与用法分析
本文实例讲述了JavaScript中click和onclick本质区别与用法.分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的一个按钮.button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 语法:buttonObject.click() <html> <head> &l
-
详解vue.js的事件处理器v-on:click
用 v-on 指令监听 DOM 事件 注意:HTML5中不能使用v-on,换为@ (1)html代码: <div id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </div> (2)js代码: var vm = new Vue
-
JS中touchstart事件与click事件冲突的解决方法
前言 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容,下面话不多说了,来一起看看详细的介绍吧. 一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 cl
-
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法.分享给大家供大家参考,具体如下: 这里演示js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件的功能: <script type="text/JavaScript" language="javascript"> <!-- ///给页面中所有img对象添加onclick事件 //author:aganar /// function
-
详解angularJS动态生成的页面中ng-click无效解决办法
今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 2.用$compile函数编译一下上边的内容 var $html = $compile(html)($scope); 3.将编译好的内容插入到页面中 $("b
-
js原生实现FastClick事件的实例
注明:本人学习javascript时间不长,最近一直在做web端的手机网页和微信应用,由于最近有用到类似fastclick的功能,在原来的程序中用touchstart和touchend事件模拟,现在尝试将其封装,得到了以下两种有问题的方案.分享给大家,另求大神指导 在手机端Web app开发中,click事件的300ms的延迟,会造成响应缓慢,尤其在低端机中尤为明显.而使用touchstart或者touchend事件,会和默认的滚轮事件发生冲突,这也不是我们所期望的. 所以,自己动手,丰衣足食,
-
快速解决js开发下拉框中blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以. click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 <input type="text" id="tel"&g
-
vue.js 添加 fastclick的支持方法
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera Mobile 11.5及以上版本 Android 2以来的Android浏览器 PlayBook OS 1及以上版本 2.不应用FastClick的场景 桌面浏览器; 如果视口元标签中设置了width=device-width,Android上的Chrome 32+会禁用300ms延时; <met
-
AngularJS的ng-click传参的方法
今天遇到个难题就是ng-click传参问题,在网上找了好多资料,先留个笔记 <ul id="dataSet" ng-repeat="item in infos" ng-model="dataSet"> <li ng-click="sentOutQuery('{{item.detailId}}')" > <div class="voucherLeft"> <p cla
随机推荐
- JMagick实现基本图像处理的类实例
- oracle误删数据恢复方法小结
- ASP.NET MVC制作404跳转实例(非302和200)
- C#实现Json转Unicode的方法
- PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
- Android开发之ListView实现Item局部刷新
- php根据用户语言跳转相应网页
- Vue开发过程中遇到的疑惑知识点总结
- jquery获取input的value问题说明
- 使用原生js写ajax实例(推荐)
- web标准常见问题集合2
- web高性能开发系列随笔 BearRui(AK-47)版
- 设计高可用和高负载的网站系统的几个注意事项
- C语言中的函数指针基础学习教程
- 关于使用js算总价的问题
- Html5+jQuery+CSS制作相册小记录
- Jar打包用法详解
- C#实现的Socket服务器端、客户端代码分享
- PHP实现即时输出、实时输出内容方法
- PHP defined()函数的使用图文详解