jquery click

介绍

在Web开发中，经常需要对用户的点击行为做出响应。JQuery是一个流行的JavaScript库，提供了很多简化处理DOM元素的方法和事件。其中，click事件是最常用的事件之一。本文将详细介绍JQuery中click事件的用法和相关注意事项。

click事件的基本用法

click事件是JQuery中最基本的鼠标点击事件，可以用来响应用户的点击行为。在JQuery中，使用click()方法来绑定click事件的处理函数。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myButton">点击我</button>
<script>
$("#myButton").click(function(){
  alert("您点击了按钮！");
});
</script>
</body>
</html>

在上述代码中，我们通过$("#myButton")选中了id为myButton的按钮元素，并使用click()方法绑定了一个匿名函数作为click事件的处理函数。该函数在用户点击按钮时会弹出一个提示框。

注意，在使用click()方法时，我们可以传入一个函数作为参数，也可以不传入任何参数。不传入参数时，click()方法将作为一个触发器，立即触发被选元素的click事件。

事件委托与动态绑定

当页面中的元素是动态生成的时候，我们无法直接通过选择器选中这些元素并绑定事件。此时，可以使用事件委托的方式来处理。

事件委托指的是将事件处理函数绑定在一个祖先元素上，然后利用事件冒泡机制将事件传播到后代元素上触发。通过这种方式，我们可以在元素动态生成后仍然能够捕获到它们的点击事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul id="myList">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

<script>
 $("#myList").on("click", "li", function(){ alert($ (this).text());
});

$("#myList").append("<li>项目5</li>");
</script>
</body>
</html>

在上面的代码中，我们通过$("#myList")选中了id为myList的ul元素，并使用on()方法绑定了一个匿名函数作为li元素的click事件的处理函数。这里需要注意的是，我们传递给on()方法的第二个参数是一个选择器字符串，用来过滤触发事件的后代元素。这样，当用户点击ul元素中的任何一个li元素时，该匿名函数就会被调用，并弹出相应li元素的文本内容。

在代码的最后，我们使用append()方法在myList中添加了一个新的li元素。这个新元素在页面加载完成之后才被添加进来，但我们仍然能够通过委托的方式捕获到它的点击事件。

阻止事件冒泡和默认行为

在处理点击事件时，有时候我们需要阻止事件的冒泡传播到父元素或阻止浏览器执行默认的事件行为。JQuery提供了一些方法来实现这些功能。

阻止事件冒泡

可以使用event.stopPropagation()方法来阻止事件的冒泡传播。这个方法需要在事件处理函数内部调用，示例如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="outer" style="background-color:lightgray; width:200px; height:200px;">
  <div id="inner" style="background-color:gray; width:100px; height:100px;"></div>
</div>
<script>
 $("#outer").click(function(){ alert("父元素被点击！"); });$ ("#inner").click(function(event){
  event.stopPropagation();
  alert("子元素被点击！");
});
</script>
</body>
</html>

在上述代码中，当用户点击inner元素时，事件首先被inner元素捕获，然后在inner元素上的处理函数被调用，弹出”子元素被点击！”的提示框。由于我们在inner元素的处理函数中调用了event.stopPropagation()方法，阻止了事件的冒泡传播，因此父元素上绑定的处理函数不会被触发。

阻止默认行为

有些元素（例如a标签和表单元素等）点击时会触发默认的行为，例如链接跳转或表单提交等。可以使用event.preventDefault()方法来阻止浏览器执行默认的事件行为。示例如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="https://www.example.com">点击链接</a>
<script>
$("#myLink").click(function(event){
  event.preventDefault();
  alert("链接被点击！");
});
</script>
</body>
</html>

在上面的代码中，当用户点击链接时，事件首先被链接元素捕获，然后在链接元素上的处理函数被调用，弹出”链接被点击！”的提示框。由于我们在链接元素的处理函数中调用了event.preventDefault()方法，阻止了浏览器默认的跳转行为。因此，页面不会跳转到链接所指向的地址。

多次点击与延迟执行

有时候我们需要对用户的多次点击行为作出响应。JQuery提供了两个方法来处理这种情况：click()和dblclick()。

多次点击

可以使用click()方法来处理多次点击事件。可以设置一个计数器，记录用户点击的次数，并在达到一定次数后执行相应的逻辑。示例如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myButton">点击多次</button>
<script>
var count = 0;
$("#myButton").click(function(){
  count++;
  if(count == 3){
    alert("您已经点击了3次！");
    count = 0;
  }
});
</script>
</body>
</html>

在上述代码中，当用户点击按钮时，计数器count会递增。当count的值达到3时，我们通过弹出对话框提示用户已经点击了3次，并将count重置为0。

延迟执行

有时候我们需要延迟执行点击事件的处理函数。可以使用setTimeout()方法来实现延迟执行的效果。setTimeout()方法接受两个参数，第一个参数是要执行的函数，第二个参数是延迟的时间（以毫秒为单位）。示例如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myButton">延迟执行</button>
<script>
$("#myButton").click(function(){
  setTimeout(function(){
    alert("延迟执行！");
  }, 2000);
});
</script>
</body>
</html>

在上面的代码中，当用户点击按钮时，会延迟2秒后弹出一个提示框，显示”延迟执行！”。

动态修改点击事件

有时候我们需要在某些条件下动态修改点击事件的处理逻辑。可以使用off()方法来移除点击事件的处理函数，使用on()方法来重新绑定新的处理函数。示例如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myButton">点击切换</button>
<script>
function handleEvent1(){
  alert("点击事件处理函数1！");
}

function handleEvent2(){
  alert("点击事件处理函数2！");
}

 $("#myButton").click(handleEvent1);$ ("#myButton").click(function(){
  if( $(this).text() === "点击切换"){$ (this).text("再次点击");
     $(this).off("click", handleEvent1);$ (this).on("click", handleEvent2);
  } else {
     $(this).text("点击切换");$ (this).off("click", handleEvent2);
    $(this).on("click", handleEvent1);
  }
});
</script>
</body>
</html>

在上述代码中，我们首先定义了两个处理函数handleEvent1()和handleEvent2()。然后，通过$("#myButton").click(handleEvent1)将handleEvent1()函数绑定为按钮的点击事件处理函数。

在按钮的点击事件处理函数中，我们通过判断按钮的文本内容来动态切换点击事件的处理逻辑。当按钮的文本是”点击切换”时，点击按钮会触发handleEvent1()函数；当按钮的文本是”再次点击”时，点击按钮会触发handleEvent2()函数。我们通过off()和on()方法来移除原有的处理函数，并重新绑定新的处理函数。