jQuery双击
时间:2020-02-23 14:46:06 来源:igfitidea点击:
双击HTML元素时,将触发jQuery dblclick()函数。
此方法会将事件处理程序附加到双击事件。
我们可以使用jQuery双击事件处理程序对选定HTML元素进行所需的操作。
jQuery双击
jQuery双击事件语法:
- dblclick()
在这种情况下,使用dblclick()方法时不带参数。
- dblclick(处理程序)
该处理程序可以是每次触发双击事件时执行的任何函数。
jQuery双击示例
以下示例演示了jQuery dblclick()事件方法的使用。
<!DOCTYPE html> <html> <head> <title>jQuery Double Click</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("div").dblclick(function(){ $( this ).toggleClass("divClass2"); }); }); </script> <style> .divClass1 { padding:5px; text-align:center; background-color:yellow; border:solid 1px; } .divClass2 { padding:5px; text-align:center; background-color:grey; border:solid 1px; } </style> </head> <body> <div class="divClass1">theitroad</div> </body> </html>
在此示例中,您可以看到双击<div>元素时将触发dblclick()方法。
在此方法中,我们传递了一个处理程序来更改<div>元素的背景颜色。
toggleClass()方法在上述代码中定义的两个CSS类之间切换。
每当我们双击元素时,都会执行toggleClass()
方法。