返回值:jQueryclick(handler(eventObject))

为 JavaScript 的 "click" 事件绑定一个处理函数,或者触发元素上的该事件。

带有参数的该方法是 .bind('click', handler) 的快捷方式,并且,从 jQuery 1.7 开始,也是 .on("click", handler) 的快捷方式。不带参数的该方法是 .trigger('click') 的快捷方式。

当用户在元素上点击了鼠标,就会触发 click 事件。任何 HTML 元素都可以接收该事件。

举例来说,请看下面的HTML:
<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

可以将该事件绑定到任何 <div> 上:

$('#target').click(function() {
  alert('Handler for .click() called.');
});

现在,当你在该元素上点击鼠标时,就会显示提示框:

Handler for .click() called.

可以通过点击其它元素来手动触发另一个元素的该事件:

$('#other').click(function() {
  $('#target').click();
});

在代码执行后,如果你点击 Trigger the handler 将同样会弹出上面的消息。

click 事件只有满足以下条件时,才能被触发:

  • 鼠标已经被按下,并且鼠标指针在目标元素的内部。
  • 鼠标松开时,鼠标指针依然在该元素的内部。

该事件通常用于处理目标元素内部的鼠标点击事件。如果只关心鼠标是否被点击,那么使用 mousedownmouseup 事件可能更合适。

示例:

当在段落元素上点击时,隐藏所点击的段落:

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; margin:5px; cursor:pointer; }
  p:hover { background:yellow; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>First Paragraph</p>

  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>

<script>


    $("p").click(function () {
      $(this).slideUp();
    });


</script>
</body>
</html>

演示:

示例:

触发页面上所有段落的 click 事件:

jQuery 代码:
$("p").click();