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

من موسوعة حسوب
طلا ملخص تعديل
سطر 67: سطر 67:
لربط مربع تنبيه "مرحبا أيها العالم!" بالحدث <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">

مراجعة 01:14، 4 مايو 2018

‎.dblclick( handler )‎

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

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

الوصف

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

‎.dblclick( handler )‎

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

handler

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

‎.dblclick( [eventData ], handler )‎

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

eventData

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

handler

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

‎.dblclick()‎

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

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

يُعد هذا التابع اختصار للتابع ‎.on( "dblclick", handler )‎ في أول اثنين من التغييرات، ‎.trigger( "dblclick" )‎ ، و ‎.trigger( "dblclick" )‎ في الثالث. يُرسَل حدث التابع dblclick إلى عنصرٍ ما عند النقر المزدوج على هذا العنصر. ويمكن لأي عنصر HTML تلقي هذا الحدث. على سبيل المثال، تأمل شيفرة HTML هذه:

<div id="target">
  Double-click here
</div>
<div id="other">
  Trigger the handler
</div>

الشكل 1 - رسم توضيحي لصفحة HTML المُقدَمة يمكن ربط مُداوِل الحدث بأي <div> :

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

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

Handler for ‎.dblclick() called.

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

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

بعد تنفيذ هذه الشيفرة، سيطلق Trigger النقر (المفرد) المُداوِل 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>Double click the block</span>
 
<script>
var divdbl = $( "div:first" );
divdbl.dblclick(function() {
  divdbl.toggleClass( "dbl" );
});
</script>
 
</body>
</html>

مصادر