首页 / JQUERY / [转]jQuery 双击事件（dblclick）时，不触发单击事件(click)

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了[转]jQuery 双击事件（dblclick）时，不触发单击事件(click)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3072字，纯文字阅读大概需要5分钟。

内容图文

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

链接：http://www.w3school.com.cn/jquery/event_dblclick.asp

jQuery 教程

jQuery 教程
jQuery 简介
jQuery 安装
jQuery 语法
jQuery 选择器
jQuery 事件

jQuery 效果

jQuery 隐藏/显示
jQuery 淡入淡出
jQuery 滑动
jQuery 动画
jQuery stop()
jQuery Callback
jQuery Chaining

jQuery HTML

jQuery 获取
jQuery 设置
jQuery 添加
jQuery 删除
jQuery CSS 类
jQuery css()
jQuery 尺寸

jQuery 遍历

jQuery 遍历
jQuery 祖先
jQuery 后代
jQuery 同胞
jQuery 过滤

jQuery AJAX

jQuery AJAX 简介
jQuery 加载
jQuery Get/Post

jQuery 杂项

jQuery noConflict()

jQuery 实例

jQuery 实例
jQuery 测验

jQuery 参考手册

jQuery 参考手册
jQuery 选择器
jQuery 事件
jQuery 效果
jQuery 文档操作
jQuery 属性操作
jQuery CSS 操作
jQuery Ajax
jQuery 遍历
jQuery 数据
jQuery DOM 元素
jQuery 核心
jQuery 属性

jQuery 事件 - dblclick() 方法

jQuery 事件参考手册

实例

当双击按钮时，隐藏或显示元素：

$("button").dblclick(function(){
  $("p").slideToggle();
});

亲自试一试

定义和用法

当双击元素时，会发生 dblclick 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

在很短的时间内发生两次 click，即是一次 double click 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

触发 dblclick 事件

语法

$(selector).dblclick()

亲自试一试

将函数绑定到 dblclick 事件

语法

$(selector).dblclick(function)

参数	描述
function	可选。规定当发生 dblclick 事件时运行的函数。

亲自试一试

jQuery 事件参考手册

例2：

在jQuery的事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素（如div等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)，执行双击事件(dblclick)时却会触发两次单击事件(click)。

　　先看一下点击事件的执行顺序：

　　单击(click)：mousedown，mouseout，click；
　　双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；

　　在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

　　如此这般的话，只需消灭掉多余的一次单击事件(click)，这个问题就解决了。

　　setTimeout

　　在jQuery的$(document).ready(function(){})里面直接开写：

[转]jQuery 双击事件（dblclick）时，不触发单击事件(click) - 文章图片

//定义setTimeout执行方法
var TimeFn = null;

$(‘div‘).click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //执行延时
    TimeFn = setTimeout(function(){
        //do function在此处写单击事件要执行的代码
    },300);
});

$(‘div‘).dblclick(functin () {
     // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //双击事件的执行代码
})

从测试结果来看，如果前后两次点击的时间在 300ms 左右的时候，还是很容易出现 click 和 dblclick 事件被“同时”调用的情况，而如果间隔的时间更短或更长，则只会有 click 或 dblclick 事件。

至此，能一定程度上避免双击(dblclick)时触发单击(click)。

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

标签：

本文系统来源：http://www.cnblogs.com/ZhuRenWang/p/4777841.html

内容总结

以上是互联网集市为您收集整理的[转]jQuery 双击事件（dblclick）时，不触发单击事件(click)全部内容，希望文章能够帮你解决[转]jQuery 双击事件（dblclick）时，不触发单击事件(click)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/456467.html

来源：【匿名】

【上一篇】VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发（转载）【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【[转]jQuery 双击事件（dblclick）时，不触发单击事件(click)】教程文章相关的互联网学习教程文章

jQuery $(document).ready()和JavaScript onload事件【代码】【图】

jQuery $(document).ready()和JavaScript onload事件 jQuery $(document).ready()和window.onload　　根据ready()方法的API说明http://api.jquery.com/ready/　　这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.　　即当DOM加载完毕的时候,执行这个指定的方法.　　因为只有document的状态ready之后,对page的操作才是安全的.$(document).ready()仅在...

关于jQuery点击事件叠加问题【代码】

先来看个例子:html:1<body>2<button id="btn">按钮</button>3<button id="btn1">按钮1</button>4</body>javascript:1 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script> 2 <script> 3 $(‘#btn‘).click(function(){ 4 alert(1) 5 $(‘#btn1‘).click(function(){ 6 alert(2); 7 }) 8}) 9 </script>点击按钮#btn两次会弹出两次1,再点击1次#btn1却弹出两次2,这就是jQuery中的事件叠加问题...

jQuery框架使用，jq选择器，jq操作页面内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息，js/jq页面加载完毕事件，jq事件【代码】

jq选择器// 获取所有的页面元素jq对象$(‘css3选择器语法‘);var $box = $(".box:nth-child(1)"); 获取的是jq对象数组// 拿到指定的页面元素jq对象$(‘css3选择器语法‘).eq(index);var $box = $(".box").eq(1); 获取的是jq对象数组// jq 转 js （ jq对像就是由数组包裹的js对象）box1 = $box[0] 从数组里取出来box1 = $box.get(0) 从数组里取出来// js 转 jq$box1 = $(box1); jq操作元素对象jq操作页面内容$(".box").eq(1...

夺命雷公狗jquery---22-bind为jquery对象绑定多个相关事件【代码】

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/jquery.js"></script><script>//页面载入ready方法 $(function(){$(‘img‘).bind({mouseover:function(){$(‘#result‘).html(‘GOGOGOG‘);},mouseout:function(){$(‘#result‘).html(‘OUTOUT‘);}});});</script></head><body><input type="button" id="btnok" value="OK"/><hr /><img src="images/1.jpg"><hr /><div id="resul...

JQuery学习笔记（2）——数组属性事件【代码】

each遍历JQueryObjectArray.each(function(index,Element))复制$(".myTable").each(function(i,ele){//使用模板函数//这里的ele是一个DOM对象，要想使用jQuery对象，可以这样写$(this)//function里面的i和ele两个参数，根据实际情况填console.log(`${i}: ele.innerText`); });toFixed(2) 保留2位小数数组map拼接数组调用map，会自动拼接成一个字符串复制 $.getJSON(‘json_data.html‘, {name1: ‘参数值‘, name2: ‘value2‘}, f...

12-JQuery学习之bind绑定事件【代码】

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>13-bind绑定事件</title></head><body><h3>bind()方法简单的绑定事件</h3><div >点击查看内容</div><input type="button" value="点击就不可用了"><hr><button >按钮1</button><button >按钮2</button><button >按钮3</button><button >按钮4</button></body><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script type="text/j...

jQuery实现事件案例【代码】

序：两种绑定时间的方式：　　1、jQ_obj.click(function () {})。　　2、jQ_obj.on(‘click‘, function () {})。一、克隆事件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>#copy {height: 100px;width: 100px;border: orange 5px solid;text-align: cente...

jquery validate组件导致表单onsubmit事件执行两次

这是今天在工作中遇到的一个问题。由于业务需要在原来表单提交时增加一段新的校验逻辑。原来的逻辑如下（代码都做了简化）：在表单提交时，使用check方法校验<form onsubmit= "return check();"> 方法代码：function check(){ if(...){ alert("xxx"); return false; }} 因为新增了一段逻辑，所以我新增了一个方法，调整了代码的结构：< form onsubmit= "return newCheck();">方法代码：　　function ne...

jQuery事件之自定义事件【代码】

其实事件的bind和unbind，都是为了自定义事件做准备。语法：$(selector).trigger(type, data); 作用：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。参数解释：type(string)：要采用护法的事件类型 data(Array): 可选参数, 传递给事件处理函数的附加参数示例：给一个按钮添加自定义的事件 $("button").bind("myClick", function(ev, a, b)){//给button按钮添加的自定义事件myClick事件}然后通过trig...

jQuery clone()方法绑定事件【代码】【图】

先看如下代码： 1 (function ($) {2 3var div = $("<div></div>").css({width: "100px", height: "100px"});4var colors = ["red", "blue", "yellow"];5for (var c = 0; c < colors.length; c++) {6var perDiv = div.clone();7 perDiv.css({8 background: colors[c]9 }); 10 perDiv.click(function () { 11 console.log(colors[c]); 12 }); 13 $("body").append(perDi...

jQuery为动态生成的select元素添加事件的方法

项目中需要在点击按钮时动态生成select元素，为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码1、首先定义全局js变量var strVoucherGroupSelect ="";2、在js中写好获取服务端数据的代码functiongenVoucherGroupSelect(rowID){ return$(strVoucherGroupSelect).attr("id", "sl_"+ rowID).parent().html(); //返回增加ID后的下拉框完整html}functiongetVoucherGroupData(){ $.ajax({ type: "Post",...

jquery bind 方法一个特点（绑定多个方法到一个dom的某个事件）【代码】

目录： [TOC]jquery bind方法介绍方法声明：bind(type,[data],fn)方法说明：为每一个匹配元素的特定事件(eg:click)绑定一个事件处理器函数。这个事件处理函数会通过参数方式接收到一个事件对象，可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。技巧：多数情况下，可以把事件处理器函数定义为匿名函数。参数意义type (String) : 事件类型。data (Object) : (可选...

jQuery事件对象的作用（利用冒泡事件优化）【代码】【图】

事件中的Event对象容易被初学者忽略掉，可能大多时候初学者不知道怎么去用它，但有些时候它还是非常有用的一个标准的"click"点击事件$(elem).on("click",function(event){event //事件对象 })在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象这里不在千篇一律的说方法的使用，通过实际的一...

解决 Jquery 一个点击事件触发多次【代码】

1：首先我们遇到的问题：如下图 $("#save").click(function () {var new_permission = transfer.getData(‘index‘); //获取右侧数据$.ajax({type: ‘POST‘,url: ‘/system_save_permission/‘,async: false,data: {‘page_type‘: pageType_url,‘column_data‘: JSON.stringify(column_data),‘new_permission‘: JSON.stringify(new_permission),},success: function (data) {$("#authority_modal > div > div > div.modal-h...

JQuery事件【代码】

JQuery事件 JS添加点击事件<input type="button" value="测试" onclick="test()" /><script type="text/javascript">function test() {alert("aa"); } </script> JQuery添加点击事件<input type="button" value="测试2" id="btn" /><script type="text/javascript">$(document).ready(function(e) {$("#btn").click(function(){alert("一个按钮");})});</script> 给一个类添加点击事件<input type="button" value="测试3"class="bt...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / [转]jQuery 双击事件（dblclick）时，不触发单击事件(click)

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

内容导读

内容图文

jQuery 教程

jQuery 效果

jQuery HTML

jQuery 遍历

jQuery AJAX

jQuery 杂项

jQuery 实例

jQuery 参考手册

jQuery 事件 - dblclick() 方法

实例

定义和用法

触发 dblclick 事件

语法

将函数绑定到 dblclick 事件

语法

内容总结

内容备注

内容手机端

【[转]jQuery 双击事件（dblclick）时，不触发单击事件(click)】教程文章相关的互联网学习教程文章

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程