الفرق بين المراجعتين لصفحة: «jQuery/dblclick»

من موسوعة حسوب
أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.dblclick()</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude> == <code>‎.dblclick( ha...'
 
 
(7 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:التابع <code>.dblclick()</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
<noinclude>{{DISPLAYTITLE:التابع <code>.dblclick()</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
== <code>‎.dblclick( handler )‎</code> ==
== <code>‎.dblclick( handler )‎</code> ==


=== ‎‎القيمة المعادة ===
=== ‎‎القيمة المعادة ===
يُعيد التابع <code>‎.dblclick( handler )</code>‎ كائنًا من النوع jQuery.
يُعيد التابع <code>‎.dblclick( handler )</code>‎ كائنًا من النوع [[jQuery/jQuery|jQuery]].


=== الوصف ===
=== الوصف ===
يربط هذا التابع مُداوِل حدث بحدث "<code>dblclick</code>" من JavaScript، أو يُطلق هذا الحدث على عنصرٍ ما.
يربط هذا التابع دالة معالجة أحداث بحدث <code>dblclick</code> من JavaScript، أو يُطلق هذا الحدث على عنصرٍ ما.


=== <code>‎.dblclick( handler )‎</code> ===
=== <code>‎.dblclick( handler )‎</code> ===
سطر 12: سطر 12:


==== <code>handler</code> ====
==== <code>handler</code> ====
هي دالة تُنفَّذ في كل مرة يُطلَق فيها الحدث من النوع [[JavaScript/Function|دالة]] ([[JavaScript/Event|حدث]] eventObject).
هي دالة تُنفَّذ في كل مرة يُطلَق فيها الحدث، وهي على الشكل <code>[[JavaScript/Function|Function]] ([[JavaScript/Event|Event]] eventObject)‎</code>.


=== <code>‎.dblclick( [eventData ], handler )‎</code> ===
=== <code>‎.dblclick( [eventData ], handler )‎</code> ===
سطر 18: سطر 18:


==== <code>eventData</code> ====
==== <code>eventData</code> ====
كائن يحتوي على البيانات التي ستُمرر إلى مداول الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.
كائن يحتوي على البيانات التي ستُمرر إلى معالج الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.


==== <code>handler</code> ====
==== <code>handler</code> ====
هي دالة تُنفَّذ في كل مرة يُطلَق فيها الحدث من النوع [[JavaScript/Function|دالة]] ([[JavaScript/Event|حدث]] eventObject).
هي دالة تُنفَّذ في كل مرة يُطلَق فيها الحدث، وهي على الشكل <code>[[JavaScript/Function|Function]] ([[JavaScript/Event|Event]] eventObject)‎</code>.


=== <code>‎.dblclick()‎</code> ===
=== <code>‎.dblclick()‎</code> ===
سطر 28: سطر 28:
لا يقبل هذا الشكل أي وسائط.
لا يقبل هذا الشكل أي وسائط.


يُعد هذا التابع اختصار للتابع ‎<code>.on( "dblclick", handler )</code>‎ في أول اثنين من التغييرات، <code>‎.trigger( "dblclick" )‎</code> ، و ‎<code>.trigger( "dblclick" )</code>‎ في الثالث. يُرسَل حدث التابع <code>dblclick</code> إلى عنصرٍ ما عند النقر المزدوج على هذا العنصر. ويمكن لأي عنصر HTML تلقي هذا الحدث. على سبيل المثال، تأمل شيفرة HTML هذه:<syntaxhighlight lang="html">
يُعد هذا التابع اختصارًا للتابع ‎<code>.on( "dblclick", handler )</code>‎ في أول شكلين من الأشكال السابقة، وسيعد مماثلًا لتنفيذ ‎<code>.trigger( "dblclick" )</code>‎ في الشكل الثالث.
 
يُرسَل حدث التابع <code>dblclick</code> إلى عنصرٍ ما عند النقر المزدوج على هذا العنصر. ويمكن لأي عنصر HTML تلقي هذا الحدث. على سبيل المثال، تأمل شيفرة HTML هذه:<syntaxhighlight lang="html">
<div id="target">
<div id="target">
   Double-click here
   انقر نقرًا مزدوجًا هنا
</div>
</div>
<div id="other">
<div id="other">
   Trigger the handler
   أطلق معالج الحدث
</div>
</div>
</syntaxhighlight>الشكل 1 - رسم توضيحي لصفحة HTML المُقدَمة
</syntaxhighlight>يمكن ربط معالج الحدث بأي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> :<syntaxhighlight lang="jquery">
 
يمكن ربط مُداوِل الحدث بأي <nowiki><div> :</nowiki><syntaxhighlight lang="jquery">
$( "#target" ).dblclick(function() {
$( "#target" ).dblclick(function() {
   alert( "Handler for .dblclick() called." );
   alert( "Handler for .dblclick() called." );
});
});
</syntaxhighlight>النقر المزدوج على هذا العنصر الآن يعرض التنبيه:<syntaxhighlight>
</syntaxhighlight>النقر المزدوج على هذا العنصر الآن يعرض التنبيه:<syntaxhighlight lang="text">
Handler for ‎.dblclick() called.
Handler for ‎.dblclick() called.
</syntaxhighlight>لإطلاق الحدث يدويًا ، استدعِ ‎<code>.dblclick()</code>‎ بدون وسيط:<syntaxhighlight lang="jquery">
</syntaxhighlight>لإطلاق الحدث يدويًا ، استدعِ ‎<code>.dblclick()</code>‎ دون وسيط:<syntaxhighlight lang="jquery">
$( "#other" ).click(function() {
$( "#other" ).click(function() {
   $( "#target" ).dblclick();
   $( "#target" ).dblclick();
});
});
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، سيطلق Trigger النقر (المفرد) المُداوِل handler أيضًا بتنبيه الرسالة.
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، سيطلق النقر (المفرد) المُعالج <code>handler</code> أيضًا، وستظهر رسالة التنبيه.


سيطلق حدث <code>dblclick</code> فقط بعد سلسلة الأحداث هذه بالضبط:
سيطلق حدث <code>dblclick</code> فقط بعد سلسلة الأحداث هذه بالضبط:
* الضغط على زر الفأرة أثناء وجود المؤشر داخل العنصر.
* تحرير الضغط على زر الفأرة أثناء وجود المؤشر داخل العنصر.
* الضغط على زر اللإارة مرة أخرى أثناء وجود المؤشر داخل العنصر، داخل إطار زمني معتمد على النظام.
* تحرير الضغط على زر الفأرة أثناء وجود المؤشر داخل العنصر.
من غير المستحسن ربط معالجات لكل من الحدثين <code>click</code> و <code>dblclick</code> لنفس العنصر. يختلف تسلسل الأحداث المنطلقة من متصفح لآخر، بعضها يستقبل حدثي نقرة واحدة <code>click</code> قبل حدث <code>dblclick</code> وبعضها يستقبل واحدة فقط. يمكن أن تختلف حساسية النقر المزدوج (الحد الأقصى للوقت بين النقرتين التي يتعرف عليها كنقر مزدوج) حسب نظام التشغيل والمتصفح، وغالبًا ما تكون قابلة للضبط من قِبل المستخدم.


الضغط على زر الماوس أثناء وجود المؤشر داخل العنصر.
=== ملاحظات إضافية ===
 
نظرًا لأن التابع ‎<code>.dblclick()</code>‎ هو مجرد اختصار للتابع ‎<code>.on( "dblclick", handler )</code>‎، فإن إلغاء ارتباط دالة معالجة الحدث مع الحدث نفسه ممكنٌ باستخدام ‎ <code>.off( "dblclick" )</code>‎.
تحرير زر الماوس أثناء وجود المؤشر داخل العنصر.
 
الضغط على زر الماوس مرة أخرى أثناء وجود المؤشر داخل العنصر، داخل إطار زمني معتمد على النظام.
 
تحرير زر الماوس أثناء وجود المؤشر داخل العنصر.
 
من غير المستحسن ربط المُداوِلات لكل من الحدثين <code>click</code> و <code>dblclick</code> لنفس العنصر. يختلف تسلسل الأحداث المنطلقة من متصفح لآخر، بعضها يستقبل حدثي نقرة واحدة <code>click</code> قبل حدث <code>dblclick</code> وبعضها يستقبل واحدة فقط. يمكن أن تختلف حساسية النقر المزدوج (الحد الأقصى للوقت بين النقرتين التي يتعرف عليها كنقر مزدوج) حسب نظام التشغيل والمتصفح، وغالبًا ما تكون قابلة للضبط من قِبل المستخدم.
 
== ملاحظات إضافية ==
نظرًا لأن التابع ‎<code>.dblclick()</code>‎ هو مجرد اختصار للتابع ‎<code>.on( "dblclick", handler )</code>‎، فإن الفصل ممكن باستخدام ‎ <code>.off( "dblclick" )</code>‎.


== أمثلة: ==
=== أمثلة ===
لربط مربع تنبيه "مرحبا أيها العالم!" بالحدث <code>dblclick</code> في كل فقرة في الصفحة:<syntaxhighlight lang="jquery">
لربط مربع تنبيه "مرحبا أيها العالم!" بالحدث <code>dblclick</code> في كل فقرة في الصفحة:<syntaxhighlight lang="jquery">
$( "p" ).dblclick(function() {
$( "p" ).dblclick(function() {
   alert( "Hello World!" );
   alert( "مرحبا أيها العالم!" );
});
});
</syntaxhighlight>انقر نقرًا مزدوجًا لتبديل لون الخلفية.<syntaxhighlight lang="html">
</syntaxhighlight>انقر نقرًا مزدوجًا لتبديل لون الخلفية.<syntaxhighlight lang="html">
سطر 92: سطر 87:
   
   
<div></div>
<div></div>
<span>Double click the block</span>
<span>انقر نقرًا مزدوجًاعلى المربع</span>
   
   
<script>
<script>
سطر 105: سطر 100:
</syntaxhighlight>
</syntaxhighlight>


=== مصادر ===
== مصادر ==
* [http://api.jquery.com/dblclick/ صفحة الطريقة ‎.dblclick()‎ في توثيق jQuery الرسمي].
* [http://api.jquery.com/dblclick/ صفحة التابع ‎.dblclick()‎ في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Data]]
[[تصنيف:jQuery Events]]
[[تصنيف:jQuery Mouse Events]]

المراجعة الحالية بتاريخ 12:11، 5 يونيو 2018

‎.dblclick( handler )‎

‎‎القيمة المعادة

يُعيد التابع ‎.dblclick( handler )‎ كائنًا من النوع jQuery.

الوصف

يربط هذا التابع دالة معالجة أحداث بحدث dblclick من JavaScript، أو يُطلق هذا الحدث على عنصرٍ ما.

‎.dblclick( handler )‎

أُضيفت مع الإصدار: 1.0.

handler

هي دالة تُنفَّذ في كل مرة يُطلَق فيها الحدث، وهي على الشكل Function (Event eventObject)‎.

‎.dblclick( [eventData ], handler )‎

أُضيفت مع الإصدار: 1.4.3.

eventData

كائن يحتوي على البيانات التي ستُمرر إلى معالج الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.

handler

هي دالة تُنفَّذ في كل مرة يُطلَق فيها الحدث، وهي على الشكل Function (Event eventObject)‎.

‎.dblclick()‎

أُضيفت مع الإصدار: 1.0.

لا يقبل هذا الشكل أي وسائط.

يُعد هذا التابع اختصارًا للتابع ‎.on( "dblclick", handler )‎ في أول شكلين من الأشكال السابقة، وسيعد مماثلًا لتنفيذ ‎.trigger( "dblclick" )‎ في الشكل الثالث.

يُرسَل حدث التابع dblclick إلى عنصرٍ ما عند النقر المزدوج على هذا العنصر. ويمكن لأي عنصر HTML تلقي هذا الحدث. على سبيل المثال، تأمل شيفرة HTML هذه:

<div id="target">
  انقر نقرًا مزدوجًا هنا
</div>
<div id="other">
  أطلق معالج الحدث
</div>

يمكن ربط معالج الحدث بأي عنصر <div> :

$( "#target" ).dblclick(function() {
  alert( "Handler for .dblclick() called." );
});

النقر المزدوج على هذا العنصر الآن يعرض التنبيه:

Handler for ‎.dblclick() called.

لإطلاق الحدث يدويًا ، استدعِ ‎.dblclick()‎ دون وسيط:

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

بعد تنفيذ هذه الشيفرة، سيطلق النقر (المفرد) المُعالج handler أيضًا، وستظهر رسالة التنبيه.

سيطلق حدث dblclick فقط بعد سلسلة الأحداث هذه بالضبط:

  • الضغط على زر الفأرة أثناء وجود المؤشر داخل العنصر.
  • تحرير الضغط على زر الفأرة أثناء وجود المؤشر داخل العنصر.
  • الضغط على زر اللإارة مرة أخرى أثناء وجود المؤشر داخل العنصر، داخل إطار زمني معتمد على النظام.
  • تحرير الضغط على زر الفأرة أثناء وجود المؤشر داخل العنصر.

من غير المستحسن ربط معالجات لكل من الحدثين click و dblclick لنفس العنصر. يختلف تسلسل الأحداث المنطلقة من متصفح لآخر، بعضها يستقبل حدثي نقرة واحدة click قبل حدث dblclick وبعضها يستقبل واحدة فقط. يمكن أن تختلف حساسية النقر المزدوج (الحد الأقصى للوقت بين النقرتين التي يتعرف عليها كنقر مزدوج) حسب نظام التشغيل والمتصفح، وغالبًا ما تكون قابلة للضبط من قِبل المستخدم.

ملاحظات إضافية

نظرًا لأن التابع ‎.dblclick()‎ هو مجرد اختصار للتابع ‎.on( "dblclick", handler )‎، فإن إلغاء ارتباط دالة معالجة الحدث مع الحدث نفسه ممكنٌ باستخدام ‎ .off( "dblclick" )‎.

أمثلة

لربط مربع تنبيه "مرحبا أيها العالم!" بالحدث dblclick في كل فقرة في الصفحة:

$( "p" ).dblclick(function() {
  alert( "مرحبا أيها العالم!" );
});

انقر نقرًا مزدوجًا لتبديل لون الخلفية.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dblclick demo</title>
  <style>
  div {
    background: blue;
    color: white;
    height: 100px;
    width: 150px;
 }
  div.dbl {
    background: yellow;
    color: black;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<span>انقر نقرًا مزدوجًاعلى المربع</span>
 
<script>
var divdbl = $( "div:first" );
divdbl.dblclick(function() {
  divdbl.toggleClass( "dbl" );
});
</script>
 
</body>
</html>

مصادر