jQuery click（）和dblclick（）示例

最新推荐文章于 2022-05-09 18:30:00 发布
最新推荐文章于 2022-05-09 18:30:00 发布
阅读量270 收藏
点赞数
文章标签： javascript ViewUI

jQuery click（）和dblclick（）事件是最常用的鼠标事件：

  1. click（）–鼠标单击匹配的元素时触发。
  2. dblclick（）–鼠标双击匹配的元素时触发。

自己尝试 

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#singleClick, #doubleClick{
		float:left;
		padding:8px;
		margin:16px;
		border:1px solid blue;
		width:150px;
		height:150px;
		background-color:#999966;
	}
	
</style>

</head>

<body>

<h1>jQuery click() and dblclick() example</h1>

<div id="singleClick">
	Single Click Me
</div>

<div id="doubleClick">
	Double Clicks Me
</div>

<script type="text/javascript">
		
$('#singleClick').click(function(){
	$('#singleClick').slideUp();
});

$('#doubleClick').dblclick(function(){
	$('#doubleClick').fadeOut();
});

</script>

</body>
</html>
试试演示
标签：

翻译自: https://mkyong.com/jquery/jquery-click-and-dblclick-example/

cyan20115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 解决 click 和 dblclick 冲突
asing1elife's blog
09-12 1360
jQuery 解决 click 和 dblclick 冲突 click 是单击事件， dblclick 是双击事件 如果给一个 DOM 元素同时绑定两个事件，则会导致响应 dblclick 时会同时响应 click 制定延迟策略 set() 用于为待执行方案设置一个延迟 clear() 用于清空设置的延迟 var clickTimeout = { _timeo...
jQuery - 同时添加click和dblclick事件
weixin_34390105的博客
09-27 214
添加事件的代码比较简单，有两种方法：$("abc").bind({"click":fn,"dblclick":fn});$("abc").click(fn).dblclick(fn)目前的问题是无论双击或者单击都只执行单击的function，为什么呢？ 下面我们说一下双击的机制：双击(dblclick)的流程是：mousedown，mouseout，click，mousedown，mouseout...
解决jQuery中dbclick事件触发两次click事件
Quber
11-15 498
在jQuery事件绑定中，dbclick可以触发两次click事件。例如一个DOM元素div，既绑定了 click 事件，又绑定了 dblclick 事件，这两个事件分别要做独立的事情。事件处理上没有冲突，都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件，但是在这之前，也执行了click 事件，那么，如何来禁止或者说屏蔽这次多余的 click 事件呢？本文将提供给...
jquery 事件 dblclick_change_blur_focus_one_hover_focusin_focusout_resize_select_submit.html
weixin_42193179的博客
07-26 233
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery事件</title> <style> span { display: none; ...
jq bind click dblclick
cztAI的博客
05-09 733
单击和双击绑定在同一元素会发生冲突，可以用一个定时器解决。 单击启动一个300ms的定时器，300ms后执行单击操作，如果300ms内再单击（即双击），取消定时器并执行双击操作。 0 300ms 单击 再单击？ 单击操作 双击操作 var timer $(document).ready(function){ $("#btn").bind( 'dblclick': function(){ clearTimeout(timer) //这里可以写一些双击操作
js模仿jquery的写法示例代码
01-19
p.click(function() { //alert(“单击”); //alert(p.style); var html=””; for ( var item in document) { html+=item+’:’+document[item]+”\r\n”; } //alert(html); }); p....
多种jQuery绑定事件的实现方式
10-22
如上面的示例所示，`reg_button_click`函数在`document.ready`时被调用了三次，因此`click`事件触发时，会弹出三个警告框。 为了解决重复绑定事件的问题，可以采用以下方法： 1. 使用`.unbind()`先解除已有的事件...
jQuery鼠标事件汇总
01-19
1、click事件：点击鼠标左键时触发 　$(‘p’).click(function(){}); 示例： $('p').click(function(){ alert('click function is ...$(button).dblclick(function(){ $(p).slideToggle(); }); 3、moused
jQuery实现拖拽可编辑模块功能代码
10-20
在提供的代码示例中，可以看到主要依赖了两个外部库：`jquery-1.3.2.min.js` 和 `jquery-ui-1.7.2.custom.min.js`。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。而jQuery UI...
jquery实现下拉框左右选择功能
10-20
在这个示例中，有两个`<select>`元素，分别用`id` "select1" 和 "select2" 标识，它们代表左右两侧的列表。用户可以在左侧列表中选择一个或多个选项，然后通过点击按钮将这些选项移动到右侧列表，反之亦然。此外，...
js不完美解决click和dblclick事件冲突问题
12-02
情况描述 　　当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click。在实际测试中发现，当dblclick的时候，总会出现1次click。下文将要解决的就是这个问题。 情况分析 　　首先我们要清楚click和dblclick的执行顺序，测试过程略，下面是测试结果： 　　click：mousedown — mouseup — click 　　dblclick：mousedown — mouseup — click — mousedown — mouseup
jQuery
weixin_44195615的博客
07-15 105
一、jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() 美元符号定义 jQuery 选择符（selector）“查询"和"查找” HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $(“p”).hide() - 隐藏所有 < p> 元素 $(“p.test”).hide() - 隐藏所有 class=“
JQuery .dblclick 双击事件 按钮双击 绑定使用方法
YDOOK
08-21 708
使用方法： $("选择器").dblclick(function(){ ... });
jQuery的click点击方法合集
me_Jackyoyo的博客
04-20 3173
$("#tb2").on('click', 'i', function () { }); // 二次点击取消选中 function badReactionClick() { $('body').on('click', '.badReactionDescription input[id^="bad"]', function () { var name = $(this).attr("name"); $(":radio[name=" + name + "]:not(
jquery双击修改_jQuery双击
从零开始的教程世界
07-19 794
jquery双击修改jQuery dblclick() function fires when an HTML element is double clicked. This method will attach an event handler to the double click event. We can do desired manipulations on the selected H...
javascript js 完美解决 click 与 dblclick 冲突，并且不会导致click延迟
weixin_34273481的博客
07-11 725
示例代码： marker.addEventListener("click", function(){ if (!window.markerClicked) { window.markerClicked = true; } else { window.markerClicked = false; ...
jQuery 双击事件（dblclick）时，不触发单击事件(click)
weixin_30896825的博客
12-15 395
万恶的双击事件啊！！ 　　在jQuery的事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素（如div等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick)时却会触发两次单击事件(click)。 　　先看一下点击事件的执行...
javascript同一个元素同时绑定click和dblclick事件（同时单击和双击事件）
kittaaron的专栏
04-07 3870
原则上尽量不要在同一DOM元素上绑定单击和双击事件，不可避免会相互影响。 我碰到的现象是：在同一DOM元素上绑定了click和dblclick(用的jquery)，在firefox下，双击事件有时候会触发，有时候不行，猜想可能是单击事件的影响造成（在IE下面双击事件能触发）。百度了一些内容：IE对双击事件的处理和其它浏览器有些不同 IE下双击触发事件： mousedown, mouseup,
html 左键右键双击事件,dblclick()
weixin_35723352的博客
05-31 1427
dblclick()为JavaScript 的"dblclick"事件绑定一个处理函数，或者触发元素上的"dblclick"事件。.dblclick(handler(eventObject))handler(eventObject)类型:Function()。每次事件触发时会执行的函数。.dblclick([eventData ], handler(eventObject))eventData类型...
dblclick()和click()的区别
最新发布
04-28
具体来说，`click()`事件在鼠标按下和释放时触发，而`dblclick()`事件则需要在同一个元素上快速地进行两次单击才会触发。 另外，`click()`事件处理单击操作，而`dblclick()`事件处理双击操作。因此，在某些情况下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值