الفرق بين المراجعتين لصفحة: «jQuery/mousedown»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| سطر 32: | سطر 32: | ||
انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html"> | انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html"> | ||
<div id="target"> | <div id="target"> | ||
اضغط هنا | |||
</div> | </div> | ||
<div id="other"> | <div id="other"> | ||
استدعِ معالج الحدث | |||
</div> | </div> | ||
</syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | </syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | ||
$( "#target" ).mousedown(function() { | $( "#target" ).mousedown(function() { | ||
alert( "استدعي معالج الحدث بنجاح." ); | |||
}); | }); | ||
</syntaxhighlight>عند الضغط على هذا العنصر، فسيظهر التنبيه التالي:<syntaxhighlight lang="text"> | </syntaxhighlight>عند الضغط على هذا العنصر، فسيظهر التنبيه التالي:<syntaxhighlight lang="text"> | ||
استُدعي معالج الحدث بنجاح | |||
</syntaxhighlight>يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر غير العنصر المطلوب:<syntaxhighlight lang="javascript"> | </syntaxhighlight>يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر غير العنصر المطلوب:<syntaxhighlight lang="javascript"> | ||
$( "#other" ).click(function() { | $( "#other" ).click(function() { | ||
$( "#target" ).mousedown(); | $( "#target" ).mousedown(); | ||
}); | }); | ||
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، سيظهر التنبيه السابق أيضًا بالضغط على " | </syntaxhighlight>بعد تنفيذ هذه الشيفرة، سيظهر التنبيه السابق أيضًا بالضغط على "استدعِ معالج الحدث". | ||
سيُرسل الحدث <code>mousedown</code> عند الضغط على أي زر في الفأرة. إن أردت تخصيص زر معين، فاستعمل الخاصِّيَّة <code>which</code>. لا تدعم جميع المتصفحات هذه الخاصِّيَّة (المتصفح Internet Explorer مثلًا يستعمل button عوضًا عن ذلك)، ولكن jQuery سوَّت هذه المشكلة بتوفير الخاصِّيَّة <code>which</code> لذا أصبح من الممكن استعمالها بشكل آمن في أي متصفح. قيمة الخاصِّيَّة <code>which</code> ستكون 1 لزر الفأرة الأيمن، والقيمة 2 للزر الأوسط، والقيمة 3 للزر الأيسر. | سيُرسل الحدث <code>mousedown</code> عند الضغط على أي زر في الفأرة. إن أردت تخصيص زر معين، فاستعمل الخاصِّيَّة <code>which</code>. لا تدعم جميع المتصفحات هذه الخاصِّيَّة (المتصفح Internet Explorer مثلًا يستعمل button عوضًا عن ذلك)، ولكن jQuery سوَّت هذه المشكلة بتوفير الخاصِّيَّة <code>which</code> لذا أصبح من الممكن استعمالها بشكل آمن في أي متصفح. قيمة الخاصِّيَّة <code>which</code> ستكون 1 لزر الفأرة الأيمن، والقيمة 2 للزر الأوسط، والقيمة 3 للزر الأيسر. | ||
| سطر 61: | سطر 61: | ||
إظهار نصوص معيَّنة عند استدعاء الحدث <code>mouseup</code> والحدث <code>mousedown</code>:<syntaxhighlight lang="html"> | إظهار نصوص معيَّنة عند استدعاء الحدث <code>mouseup</code> والحدث <code>mousedown</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang=" | <html lang="ar"> | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>mousedown | <title>mousedown مثالٌ عن استعمال التابع</title> | ||
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> | <script src="https://code.jquery.com/jquery-1.10.2.js"></script> | ||
</head> | </head> | ||
<body> | <body> | ||
<p> | <p>اضغط على زر الفأرة ثم حرره هنا</p> | ||
<script> | <script> | ||
$( "p" ) | $( "p" ) | ||
.mouseup(function() { | .mouseup(function() { | ||
$( this ).append( "<span style='color:#f00;'> | $( this ).append( "<span style='color:#f00;'>حُرِّر زر الفأرة.</span>" ); | ||
}) | }) | ||
.mousedown(function() { | .mousedown(function() { | ||
$( this ).append( "<span style='color:#00f;'> | $( this ).append( "<span style='color:#00f;'>ضُغط على زر الفأرة.</span>" ); | ||
}); | }); | ||
</script> | </script> | ||
المراجعة الحالية بتاريخ 10:43، 4 يونيو 2018
.mousedown( handler )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين مع الحدث mousedown (الضغط على زر الفأرة) في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.
.mousedown( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.mousedown( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.mousedown()
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي وسائط.
هذا التابع هو اختصار للتابع .on( "mousedown", handler ) في شكله الأول والثاني، واختصار للتابع .trigger( "mousedown" ) في شكله الثالث.
يُرسل الحدث mousedown إلى عنصر عند الضغط على زر الفأرة ومؤشرها فوق هذا العنصر. يمكن أن تستقبل جميع عناصر HTML هذا الحدث.
انظر مثلًا إلى شيفرة HTML التالية:
<div id="target">
اضغط هنا
</div>
<div id="other">
استدعِ معالج الحدث
</div>
يمكن أن يُربط معالج الحدث مع أي عنصر <div>:
$( "#target" ).mousedown(function() {
alert( "استدعي معالج الحدث بنجاح." );
});
عند الضغط على هذا العنصر، فسيظهر التنبيه التالي:
استُدعي معالج الحدث بنجاح
يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر غير العنصر المطلوب:
$( "#other" ).click(function() {
$( "#target" ).mousedown();
});
بعد تنفيذ هذه الشيفرة، سيظهر التنبيه السابق أيضًا بالضغط على "استدعِ معالج الحدث".
سيُرسل الحدث mousedown عند الضغط على أي زر في الفأرة. إن أردت تخصيص زر معين، فاستعمل الخاصِّيَّة which. لا تدعم جميع المتصفحات هذه الخاصِّيَّة (المتصفح Internet Explorer مثلًا يستعمل button عوضًا عن ذلك)، ولكن jQuery سوَّت هذه المشكلة بتوفير الخاصِّيَّة which لذا أصبح من الممكن استعمالها بشكل آمن في أي متصفح. قيمة الخاصِّيَّة which ستكون 1 لزر الفأرة الأيمن، والقيمة 2 للزر الأوسط، والقيمة 3 للزر الأيسر.
هذا الحدث مفيد خصوصًا للتأكد من استعمال الزر الأساسي (الأيسر) لبدء عمليَّة السحب (drag). إن أُهملت هذه العمليَّة، فيمكن أن تحدث نتائج غريبة عندما يحاول المستخدم استعمال قائمة المحتوى. رغم أنَّه يمكن اكتشاف الزر الأوسط والأيمن مع تلك الخاصِّيَّات إلا أنَّ ذلك غير موثوق ولا يُعوَّل عليه. في المتصفح Opera والمتصفح Safari مثلًا، لا تُكتشف ضغطات الزر الأيمن افتراضيًّا.
إن ضغط المستخدم زر الفأرة على عنصر وسحب المؤشر بعيدًا عنه ثمَّ تحرير الزر المضغوط، فهذا لايزال يوصف بالحدث mousedown، إذ لا تُعامَل هذه السلسلة من الأحداث على أنَّها ضغطة زر في أغلب واجهات المستخدم؛ لذا يستحسن غالبًا استعمال الحدث click ما لم يكن استعمال الحدث mousedown هو الأفضل في حالات معيَّنة.
ملاحظات إضافية
لمَّا كان التابع .mousedown() اختزالٌ للتابع .on( "mousedown", handler )، فمن الممكن استعمال .off( "mousedown" ) لإزالة الحدث mousedown أي عملية معاكسة لما سبق.
أمثلة
إظهار نصوص معيَّنة عند استدعاء الحدث mouseup والحدث mousedown:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>mousedown مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>اضغط على زر الفأرة ثم حرره هنا</p>
<script>
$( "p" )
.mouseup(function() {
$( this ).append( "<span style='color:#f00;'>حُرِّر زر الفأرة.</span>" );
})
.mousedown(function() {
$( this ).append( "<span style='color:#00f;'>ضُغط على زر الفأرة.</span>" );
});
</script>
</body>
</html>