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()方法。