التابع .click() في jQuery
.click( handler )
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التابع .click() في ربط مُعالِج الأحداث (event handler) إلى الحدث click في JavaScript أو إطلاق هذا الحدث على عنصر ما.
.click( handler )
أضيفت في الإصدار: 1.0.
handler
دالة على الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
.click( [eventData ], handler )
أضيفت في الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيّة استخدام أي نوع)، ويُمثِّل كائن يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة على الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
.click()
أضيفت في الإصدار: 1.0.
لا يقبل هذا الشكل من التّابع أيّة وسائط.
يُعدُّ هذا التّابع اختصارًا للتابع .on( "click", handler ) في أول شكلين له، وللتّابع .trigger( "click" ) في شكله الثّالث. يُرسَل الحدث click إلى العنصر عندما يكون مُؤشّر الفأرة فوق العنصر ويُنقَر على زر الفأرة ثمّ يُترَك. بإمكان أي عنصر HTML أن يستقبل هذا الحدث، فلنأخذ مثال HTML التالي:
<div id="target">
انقر هنا
</div>
<div id="other">
إطلاق مُعالِج الأحداث
</div>
يُمكِن ربط مُعالِج الحدث إلى عنصر <div>:
$( "#target" ).click(function() {
alert( "استُدعي معالج الأحداث للتابع .click()" );
});
إن ضغطنا الآن على هذا العنصر، ستُعرَض رسالة السّجل:
استُدعي معالج الأحداث للتابع .click()
بإمكاننا أيضًا إطلاق الحدث عند النقر على عنصر آخر:
$( "#other" ).click(function() {
$( "#target" ).click();
});
بعد تنفيذ هذه الشيفرة سيُعطينا الضغط على عبارة "إطلاق مُعالِج الحدث" رسالة التنبيه.
يُطلَق الحدث click فقط بعد سلسلة الأحداث هذه:
- عندما يكون زر الفأرة منقورًا ويكون مُؤشّر الفأرة بداخل مجال العنصر.
- عندما يُترَك زر الفأرة ويكون مُؤشّر الفأرة بداخل مجال العنصر.
يكون عادةً هذا هو التسلسل المطلوب قبل إطلاق الحدث، وإن لم نكن نرغب بهذا فقد تكون الأحداث mousedown و mouseup مُلائِمةً أكثر.
ملاحظات إضافية
- لمّا كان التّابع
.click() مُجرَّد اختصار للتابع.on( "click", handler )، فمن المُمكن إلغاء الحدث عبر استخدام .off( "click" ).
أمثلة
إخفاء الفقرات الموجودة في الصفحة عند النقر عليها:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click مثال عن الحدث</title>
<style>
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
<p>فقرة أخيرة أيضًا</p>
<script>
$( "p" ).click(function() {
$( this ).slideUp();
});
</script>
</body>
</html>
إطلاق الحدث click على جميع الفقرات الموجودة في الصفحة:
$( "p" ).click();