`
天梯梦
  • 浏览: 13730277 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

jquery实现双击事件不触发单击事件

阅读更多

代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

var Test = {
times: 0,
timer: null,
logs: [],

first: null,
last: null,

do_click: function() {
	var self = Test;

	self.start();
	clearTimeout(self.timer);
	self.times++;
	self.timer = setTimeout(function() { self.logs.push('click'); self.echo(); }, 300);
},

do_dblclick: function() {
	var self = Test;

	clearTimeout(self.timer);
	self.logs.push('dblclick');
	self.echo();
},

start: function() {
	if (this.first == null) {
		this.first = new Date().getTime();
	}
},

end: function() {
	if (this.last == null) {
		this.last = new Date().getTime();
	}
},

get_time: function() {
	return (this.last - this.first) || 0;
},

echo: function() {
	var self = Test;
	self.end();

	var log = 'No.' + self.times + '; Use time: ' + self.get_time() + 'ms; Event: ' + self.logs.join(', ') + ';<br />\n';
	$('#log').prepend(log);
	self.first = null;
	self.last = null;
	self.logs = [];
},

init: function() {
		$(document).ready(function() {
			$('div').click(Test.do_click).dblclick(Test.do_dblclick);
		});
	}
};

Test.init();

</script>
</head>

<body>
<div style="width:200px; height:50px; border:1px solid #999;">Click / DblClick Me!</div>
Log:<br />
<textarea id="log" rows="20" cols="50"></textarea>
</body>
</html>
 

 

 

 

 

 

 

分享到:
评论

相关推荐

    鼠标双击或触摸双击事件检测jQuery插件

    1. **鼠标双击检测**:对于鼠标设备,jQuery-doubleTap监听连续的两次点击事件。如果两次点击发生在短时间内(通常设置为300毫秒内),则视为双击事件。 2. **触摸双击检测**:在触摸设备上,插件监听"touchstart...

    Jquery日历控件fullCalendar中将dayClick改为双击或单击事件的方法

    在使用fullCalendar时,我们可能会遇到需要自定义用户交互行为的需求,比如将默认的“日点击”(dayClick)事件更改为单击或双击触发。下面将详细介绍如何实现这一功能。 首先,`dayClick`是fullCalendar的一个核心...

    jQuery触摸鼠标双击事件检测代码.zip

    在实际应用中,开发者可以使用这个插件来实现诸如放大图片、展开折叠内容或者任何需要双击触发的功能。通过以下代码示例,我们可以看到如何使用这个插件: ```javascript $(document).ready(function() { $...

    js单击事件和双击事件并存绑定

    问题在于,当这两种事件同时存在时,如果用户快速连续点击两次,可能会触发单击事件后立即触发双击事件,导致预期的行为混乱。为了解决这个问题,我们需要一种策略来确保两个事件可以正确地并存。 这里我们引入了一...

    FullCalendar扩展双击事件

    本文将深入探讨如何在FullCalendar中实现双击事件功能,包括源码修改和扩展方法,以兼容不同版本。 ### 1. 源码版双击事件 在源码版FullCalendar中添加双击事件功能,你需要直接修改FullCalendar的核心代码。首先...

    jquery区分单击双击

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

    jquery双击图片放大缩小效果

    "jQuery双击图片放大缩小效果"是一种创新的交互设计,能够提升用户浏览图片时的视觉体验。这个特效通过使用JavaScript库jQuery实现,允许用户双击图片后,图片会独立出来显示,并且其他页面元素变暗,创造出一种聚焦...

    jquery图片拖拽实例(支持鼠标双击事件拖拽图片)效果代码

    在本实例中,我们将深入探讨如何使用jQuery库实现一个图片拖拽功能,同时支持鼠标双击事件来开启拖拽操作。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画制作等任务,使得创建交互式的网页变得...

    jquery单击事件和双击事件冲突解决方案

    由于浏览器事件的触发机制,双击事件会先触发单击事件,随后再触发双击事件,因此会导致单击事件被误触发两次。 本文将详细阐述如何解决jQuery中单击事件和双击事件之间的冲突问题,并提供示例代码,帮助开发者理解...

    fullcalendar1.5.1 添加双击事件版本

    例如,“dayClick”事件在用户单击日期格子时触发,而“eventClick”事件则在用户点击事件条目时触发。这些单击事件通常用于显示更多信息、导航至详情页或执行其他操作。 综上所述,FullCalendar 1.5.1版本的更新...

    ASP.NET GridView 和GridData行单击与双击事件

    对于双击事件,由于ASP.NET内置的GridView控件不直接支持双击事件,我们需要使用JavaScript或者jQuery来实现。在HTML标记中,我们可以为GridView添加一个OnRowDataBound事件,然后在客户端注册一个双击事件监听器。 ...

    jquery鼠标事件的小例子

    这个"jquery鼠标事件的小例子"旨在帮助初学者更好地理解如何在jQuery中使用鼠标事件,同时结合CSS来实现交互效果。 首先,让我们深入了解一下jQuery中的鼠标事件。jQuery封装了许多原生JavaScript中的鼠标事件,...

    Asp.net中Calendar日历控件中点击日期的鼠标双击事件

    综上所述,通过结合ASP.NET的`Calendar`控件和jQuery的`dblclick`事件,我们可以实现日历控件的双击事件,触发日程添加功能。在实际开发过程中,根据项目的具体需求和技术栈,你可能需要对上述方案进行适当的修改和...

    jQuery仿Windows桌面点击双击代码.zip

    本示例中的"jQuery仿Windows桌面点击双击代码.zip"是一个基于jQuery实现的项目,它旨在模仿Windows操作系统桌面的行为,包括单击和双击事件处理以及右键菜单的显示与编辑操作功能。下面我们将深入探讨这个项目的相关...

    jquery双击图片弹出插件.rar

    总结来说,"jquery双击图片弹出插件"利用jQuery的便利性和强大功能,实现了用户友好的图片预览体验。它结合了选择器、事件处理、弹出层技术、图片加载和显示、动画效果以及可定制性,为Web开发者提供了一个高效、...

    jQuery移动端双击图片放大特效.zip

    综上所述,"jQuery移动端双击图片放大特效"通过结合jQuery事件处理、CSS3动画和响应式设计,实现了手机商城商品图片的便捷放大功能,提高了用户的浏览体验。开发者可以根据具体需求对这个代码进行调整和定制,以适应...

    jQuery参考手册-事件总结

    在jQuery库中,事件处理变得简单且灵活,提供了多种方法来绑定、触发和管理事件。以下是对jQuery事件方法的详细总结: 1. **bind()**: `bind()` 方法允许你为一个或多个事件(如`click`、`change`等)绑定一个处理...

    jQuery 三击事件实现代码

    在jQuery中,双击事件是十分常见的,但是有时候开发者可能需要在用户三次点击某个元素之后触发特定的操作,这就需要用到三击事件。虽然jQuery没有提供现成的三击事件处理函数,但是我们可以通过编写自定义代码来实现...

    jQuery事件之鼠标事件

    - **定义**:当用户单击鼠标左键时触发此事件。 - **示例**: ```javascript $('p').click(function(){ alert('click function is running!'); }); ``` 这段代码为所有的`&lt;p&gt;`元素绑定了一个`click`事件...

Global site tag (gtag.js) - Google Analytics