jQuery怎么实现在同一个按钮绑定单击和双击事件 - jQuery当前位置:& &&&jQuery怎么实现在同一个按钮绑定单击和双击事件jQuery怎么实现在同一个按钮绑定单击和双击事件&&网友分享于：&&浏览：0次jQuery如何实现在同一个按钮绑定单击和双击事件jQuery如何实现在同一个按钮绑定单击和双击事件:单纯的单击事件和双击事件绑定在按钮上是非常简单的操作，又因为双击事件的使用频率要远远低于单击事件，所以两个事件绑定在同一个元素的上几率很小，但是这种情况并非是绝对没有。但是在默认情况下如果同时注册单击和双击事件，如果对按钮进行双击，那么单击事件也会同时出发，下面就通过代码实例介绍一下如何解决此问题。代码如下:
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="/" /&
&title&蚂蚁部落&/title&
&style type="text/css"&
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
margin:0px auto;
border:5px solid green;
height:<span style="background-color: #f5f5f5; color: #px;
&script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"&&/script&
&script type="text/javascript"&
$(function () {
var num = 0;
var timeFunName = null;
$("button").bind("click",function(){
clearTimeout(timeFunName);
timeFunName = setTimeout(function(){
$("#content").html($("#content").html()+"第"+num+"次事件，事件名:单击&br/&");
}).bind("dblclick",function(){
clearTimeout(timeFunName);
$("#content").html($("#content").html()+"第"+num+"次事件，事件名:双击&br/&");
&div id="box"&
&div id="content"&&/div&
&button type="button"&提交&/button&
以上代码实现了我们的要求，能够实现单击和双击事件共存的效果，下面介绍一下它的实现原理。一.实现原理:代码的具体实现过程这里就不多介绍了，下面就简单介绍一下实现原理。我们想要实现的就是当双击的时候并不触发单击事件，其实这里并不是不触发单击事件，而是不执行指定的操作，这里采用了定时器函数延迟执行的策略，也就是说点击按钮之后，会延迟一段时间再去执行相关操作，如果是双击事件，那么就停止定时器函数的执行，那么自然单击事件中的相关操作也就会得不到执行。二.相关阅读:1.bind()可以参阅一章节。&2.clearTimeout()函数可以参阅一章节。&3.setTimeout()函数可以参阅一章节。&4.html()函数可以参阅一章节。&5.dblclick事件可以参阅一章节。
原文地址是:/forum.php?mod=viewthread&tid=12583
更多内容可以参阅:/jquery/
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有后使用快捷导航没有帐号？
只需一步，快速开始
查看: 7395|回复: 7
请教如何实现点击一个按钮的时候改变按钮样式和文字再次点击则还原
UID246113在线时间 小时积分399帖子离线17306 天注册时间
中级会员, 积分 399, 距离下一级还需 101 积分
就是改变按钮本身的样式啊。比如说&input class=&1& value=&点我& id=&a1&&我点击一下要class变成2，然后再次点击就又还原成1。请问如何实现。
我对js不懂，希望得到大家的帮助，谢谢。
UID503469在线时间 小时积分1829帖子离线17306 天注册时间
银牌会员, 积分 1829, 距离下一级还需 1171 积分
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&title&新建网页 1&/title&
&style type=&text/css&&
color:blue
&input class=&class1& value=&点我& id=&a1&&
&script type=&text/javascript&&
window.onload = function(){
var obj = document.getElementById(&a1&);
obj.onclick = function(){
obj.className = (obj.className == &class1&?&class2&:&class1&)
&提示：您可以先修改部分代码再运行
UID246113在线时间 小时积分399帖子离线17306 天注册时间
中级会员, 积分 399, 距离下一级还需 101 积分
pxh0829 发表于
不过，不是输入框，是button。
改变css的同时也改变value的文字，再次点击回到原始状态。
UID246113在线时间 小时积分399帖子离线17306 天注册时间
中级会员, 积分 399, 距离下一级还需 101 积分
pxh0829 发表于
&input type=&button& value=&点我& class=&class1& id=&a1&&
UID503469在线时间 小时积分1829帖子离线17306 天注册时间
银牌会员, 积分 1829, 距离下一级还需 1171 积分
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&title&新建网页 1&/title&
&style type=&text/css&&
color:blue
&input type=&button& class=&class1& value=&点我& id=&a1&&
&script type=&text/javascript&&
window.onload = function(){
var obj = document.getElementById(&a1&);
obj.onclick = function(){
obj.className = (obj.className == &class1&?&class2&:&class1&);
obj.value = (obj.value == &点我&?&我被点了&:&点我&);
&提示：您可以先修改部分代码再运行
UID246113在线时间 小时积分399帖子离线17306 天注册时间
中级会员, 积分 399, 距离下一级还需 101 积分
pxh0829 发表于
十分感谢！！！！么~！~~~~~~
UID613591在线时间 小时积分9帖子离线17306 天注册时间
新手上路, 积分 9, 距离下一级还需 41 积分
高手 正要学习这个呢
UID613257在线时间 小时积分231帖子离线17306 天注册时间
中级会员, 积分 231, 距离下一级还需 269 积分
正愁找不到这样的教程 这就有好代码 不错啊
Powered by}