返回值:jQueryclick(handler(eventObject))
为 JavaScript 的 "click" 事件绑定一个处理函数,或者触发元素上的该事件。
-
1.0 新增click(handler(eventObject))
handler(eventObject) (Function) 每当事件触发时执行的函数。 -
1.4.3 新增click([eventData], handler(eventObject))
eventData (Object) 可选参数,将要传递给事件处理函数的数据映射。handler(eventObject) (Function) 每当事件触发时执行的函数。 -
1.0 新增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
事件只有满足以下条件时,才能被触发:
- 鼠标已经被按下,并且鼠标指针在目标元素的内部。
- 鼠标松开时,鼠标指针依然在该元素的内部。
该事件通常用于处理目标元素内部的鼠标点击事件。如果只关心鼠标是否被点击,那么使用 mousedown
或 mouseup
事件可能更合适。
示例:
当在段落元素上点击时,隐藏所点击的段落:
<!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();