使用jQuery避免鼠标双击的解决方案

用户双击DOM对象(例如按钮和链接等)时,对于用户交互一直是个麻烦的问题,如果你的元素点击事件不止触发一次,可以参考以下的解决方案


介绍 
当用户双击DOM对象(例如按钮和链接等)时,对于用户交互一直是个麻烦的问题。 幸运的是, jQuery 提供了一个相当棒的解决方法。 那就是.one()。 


.one()这个方法是做什么的? 
它附加了一个元素事件的处理程序并且每个元素只能运行一次事件处理器函数。 


参数 
.one( events [, selector ] [, data ], handler(eventObject) ) 


events 
类型: String 
•规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。就像“click”和“keydown.myPlugin”一样。 


选择器参数 
参数类型: String 
•选择器字符串用于过滤出被选中的元素中能触发事件的子元素 
•如果传null或者省略,当事件到达选定的元素时就会被触发 
数据 
参数类型: 任何类型 
•该参数的值在事件触发将会传递给的事件处理函数 
事件处理函数 
 参数类型:函数类型 
•事件触发时应该调用的函数 
•false 也是允许的因为它就是简单return false;函数的简写形式 
举例 
$("#saveBttn").one("click", function () { 
alert("This will be displayed only once."); 
}); 

或者 
$("body").one("click", "#saveBttn", function () { 
alert("This displays if #saveBttn is the first thing clicked in the body."); 
});

上述代码关键在于: 
•当代码执行结束时,点击id为saveBtn的元素将会弹出警告框 
•之后的点击将没有任何反映 
•这等同于 ==> 
$("#saveBttn").on("click", function (event) { 
alert("This will be displayed only once."); 
$(this).off(event); 
}); 

换句话说这和在绑定事件处理函数中显式调用off()作用是一样的 

了解更多请点击 
jQuery .one()
总结 
上面所提到的方法是jQuery 1.7的新特性,所以如果你的元素点击事件不止触发一次,这可能是个解决方案哦。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值