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

من موسوعة حسوب
مرئينص الويكي
إضافة محتويات الصفحة.
 
طلا ملخص تعديل
 
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين)
سطر 3: سطر 3:


=== القيم المعادة ===
=== القيم المعادة ===
يعيد كائنًا من النوع jQuery.
يعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].


=== الوصف ===
=== الوصف ===
سطر 12: سطر 12:


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


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


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


=== <code>‎.mouseleave()‎</code> ===
=== <code>‎.mouseleave()‎</code> ===
سطر 32: سطر 32:
انظر مثلًا إلى شيفرة [[HTML]] التالية:<syntaxhighlight lang="html">
انظر مثلًا إلى شيفرة [[HTML]] التالية:<syntaxhighlight lang="html">
<div id="outer">
<div id="outer">
   Outer
   عنصر خارجي
   <div id="inner">
   <div id="inner">
     Inner
     عنصر داخلي
   </div>
   </div>
</div>
</div>
<div id="other">
<div id="other">
   Trigger the handler
   استدعِ معالج الحدث
</div>
</div>
<div id="log"></div>
<div id="log"></div>
</syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر:<syntaxhighlight lang="javascript">
</syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر:<syntaxhighlight lang="javascript">
$( "#outer" ).mouseleave(function() {
$( "#outer" ).mouseleave(function() {
 $( "#log" ).append( "<div>Handler for .mouseleave() called.</div>" );
  $( "#log" ).append( "<div>استدعي معالج الحدث بنجاح</div>" );
});
});
</syntaxhighlight>عندما يخرج مؤشِّر الفأرة من حيِّز العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ذي المعرِّف outer، فستضاف الرسالة إلى العنصر <code>[[HTML/div|<nowiki><div id="log"‎></nowiki>]]</code>. يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر:<syntaxhighlight lang="javascript">
</syntaxhighlight>عندما يخرج مؤشِّر الفأرة من حيِّز العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ذي المعرِّف outer، فستضاف الرسالة إلى العنصر <code>[[HTML/div|<nowiki><div id="log"‎></nowiki>]]</code>. يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر:<syntaxhighlight lang="javascript">
سطر 50: سطر 49:
 $( "#outer" ).mouseleave();
 $( "#outer" ).mouseleave();
});
});
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "Trigger the handler".
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "استدعِ معالج الحدث".


يختلف الحدث <code>mouseleave</code> عن الحدث <code>mouseout</code> في طريقة تعامله مع انتشار الحدث (event bubbling). لو استُعمِل الحدث <code>mouseout</code> في المثال السابق، فسيُستدعَى معالج الحدث آنذاك عندما يخرج مؤشِّر الفأرة من العنصر Inner؛ وهذا السلوك غير محبَّذ عادةً. من جهة أخرى، يستدعي الحدث <code>mouseleave</code> معالجه عندما يخرج مؤشِّر الفأرة من حدود العنصر نفسه فقط وليس من حدود عناصره السليلة (أحفاده [descendant]) أيضًا. بناءً على ذلك، سيُستدعى معالج الحدث في المثال السابق عندما يدخل مؤشِّر الفأرة حيِّز العنصر Outer فقط وليس العنصر Inner.
يختلف الحدث <code>mouseleave</code> عن الحدث <code>mouseout</code> في طريقة تعامله مع انتشار الحدث (event bubbling). لو استُعمِل الحدث <code>mouseout</code> في المثال السابق، فسيُستدعَى معالج الحدث آنذاك عندما يخرج مؤشِّر الفأرة من العنصر Inner؛ وهذا السلوك غير محبَّذ عادةً. من جهة أخرى، يستدعي الحدث <code>mouseleave</code> معالجه عندما يخرج مؤشِّر الفأرة من حدود العنصر نفسه فقط وليس من حدود عناصره السليلة (أحفاده [descendant]) أيضًا. بناءً على ذلك، سيُستدعى معالج الحدث في المثال السابق عندما يدخل مؤشِّر الفأرة حيِّز العنصر Outer فقط وليس العنصر Inner.
سطر 60: سطر 59:
إظهار عدد مرات استدعاء الحدث <code>mouseout</code> والحدث mouseleave. يُطلَق الحدث <code>mouseout</code> عندما يخرج مؤشِّر الفأرة من داخل العنصر الابن أيضًا، بينما يُطلَق الحدث <code>mouseleave</code> عندما يخرج المؤشِّر  من حدود العنصر فقط:<syntaxhighlight lang="html">
إظهار عدد مرات استدعاء الحدث <code>mouseout</code> والحدث mouseleave. يُطلَق الحدث <code>mouseout</code> عندما يخرج مؤشِّر الفأرة من داخل العنصر الابن أيضًا، بينما يُطلَق الحدث <code>mouseleave</code> عندما يخرج المؤشِّر  من حدود العنصر فقط:<syntaxhighlight lang="html">
<!doctype html>
<!doctype html>
<html lang="en">
<html lang="ar">
<head>
<head>
   <meta charset="utf-8">
   <meta charset="utf-8">
   <title>mouseenter demo</title>
   <title>mouseenter مثالٌ عن استعمال التابع</title>
   <style>
   <style>
   div.out {
   div.out {
سطر 89: سطر 88:
   
   
<div class="out overout">
<div class="out overout">
   <p>move your mouse</p>
   <p>حرك مؤشر الفأرة هنا</p>
   <div class="in overout"><p>move your mouse</p><p>0</p></div>
   <div class="in overout"><p>حرك مؤشر الفأرة هنا</p><p>0</p></div>
   <p>0</p>
   <p>0</p>
</div>
</div>
   
   
<div class="out enterleave">
<div class="out enterleave">
   <p>move your mouse</p>
   <p>حرك مؤشر الفأرة هنا</p>
   <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
   <div class="in enterleave"><p>حرك مؤشر الفأرة هنا</p><p>0</p></div>
   <p>0</p>
   <p>0</p>
</div>
</div>
سطر 104: سطر 103:
$( "div.overout" )
$( "div.overout" )
   .mouseover(function() {
   .mouseover(function() {
     $( "p:first", this ).text( "mouse over" );
     $( "p:first", this ).text( "دخل المؤشر" );
     $( "p:last", this ).text( ++i );
     $( "p:last", this ).text( ++i );
   })
   })
   .mouseout(function() {
   .mouseout(function() {
     $( "p:first", this ).text( "mouse out" );
     $( "p:first", this ).text( "غادر المؤشر" );
   });
   });
   
   
سطر 114: سطر 113:
$( "div.enterleave" )
$( "div.enterleave" )
   .mouseenter(function() {
   .mouseenter(function() {
     $( "p:first", this ).text( "mouse enter" );
     $( "p:first", this ).text( "دخل المؤشر" );
     $( "p:last", this ).text( ++n );
     $( "p:last", this ).text( ++n );
   })
   })
   .mouseleave(function() {
   .mouseleave(function() {
     $( "p:first", this ).text( "mouse leave" );
     $( "p:first", this ).text( "غادر المؤشر" );
   });
   });
</script>
</script>
سطر 124: سطر 123:
</body>
</body>
</html>
</html>
</syntaxhighlight>
</syntaxhighlight>


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

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

‎.mouseleave( handler )‎

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

يعيد كائنًا من النوع jQuery.

الوصف

يربط هذا التابع معالج حدث معين مع الحدث mouseleave عندما يخرج مؤشِّر الفأرة من حيِّز عنصرٍ، أو يستدعي ذلك الحدث لتطبيقه على عنصر.

‎.mouseleave( handler )‎

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

handler

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

‎.mouseleave( [eventData ], handler )‎

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

eventData

أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.

handler

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

‎.mouseleave()‎

أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي وسائط.

هذا التابع هو اختصارٌ للتابع ‎.on( "mouseleave", handler )‎ في شكله الأول والثاني، واختصار للتابع ‎.trigger( "mouseleave" )‎ في شكله الثالث.

الحدث mouseleave في JavaScript هو خاصِّيَّة في المتصفح Internet Explorer. بسبب وجود خدمة عامة للأحداث، فستحاكي jQuery هذا الحدث لاستعماله في أي متصفح بغض النظر عن نوعه. يُرسَل هذا الحدث إلى عنصر عندما يخرج مؤشِّر الفأرة من حيِّزه. يمكن أن تستقبل جميع عناصر HTML هذا الحدث.

انظر مثلًا إلى شيفرة HTML التالية:

<div id="outer">
  عنصر خارجي
  <div id="inner">
    عنصر داخلي
  </div>
</div>
<div id="other">
  استدعِ معالج الحدث
</div>
<div id="log"></div>

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

$( "#outer" ).mouseleave(function() {
  $( "#log" ).append( "<div>استدعي معالج الحدث بنجاح</div>" );
});

عندما يخرج مؤشِّر الفأرة من حيِّز العنصر <div> ذي المعرِّف outer، فستضاف الرسالة إلى العنصر <div id="log"‎>. يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر:

$( "#other" ).click(function() {
 $( "#outer" ).mouseleave();
});

بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "استدعِ معالج الحدث".

يختلف الحدث mouseleave عن الحدث mouseout في طريقة تعامله مع انتشار الحدث (event bubbling). لو استُعمِل الحدث mouseout في المثال السابق، فسيُستدعَى معالج الحدث آنذاك عندما يخرج مؤشِّر الفأرة من العنصر Inner؛ وهذا السلوك غير محبَّذ عادةً. من جهة أخرى، يستدعي الحدث mouseleave معالجه عندما يخرج مؤشِّر الفأرة من حدود العنصر نفسه فقط وليس من حدود عناصره السليلة (أحفاده [descendant]) أيضًا. بناءً على ذلك، سيُستدعى معالج الحدث في المثال السابق عندما يدخل مؤشِّر الفأرة حيِّز العنصر Outer فقط وليس العنصر Inner.

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

لمَّا كان التابع ‎.mouseleave()‎ اختزالٌ للتابع ‎.on( "mouseleave", handler )‎، فمن الممكن استعمال ‎.off( "mouseleave" )‎ لإزالة الحدث mouseleave أي عمليَّة معاكسة لما سبق.

أمثلة

إظهار عدد مرات استدعاء الحدث mouseout والحدث mouseleave. يُطلَق الحدث mouseout عندما يخرج مؤشِّر الفأرة من داخل العنصر الابن أيضًا، بينما يُطلَق الحدث mouseleave عندما يخرج المؤشِّر  من حدود العنصر فقط:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>mouseenter مثالٌ عن استعمال التابع</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="out overout">
  <p>حرك مؤشر الفأرة هنا</p>
  <div class="in overout"><p>حرك مؤشر الفأرة هنا</p><p>0</p></div>
  <p>0</p>
</div>
 
<div class="out enterleave">
  <p>حرك مؤشر الفأرة هنا</p>
  <div class="in enterleave"><p>حرك مؤشر الفأرة هنا</p><p>0</p></div>
  <p>0</p>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseover(function() {
    $( "p:first", this ).text( "دخل المؤشر" );
    $( "p:last", this ).text( ++i );
  })
  .mouseout(function() {
    $( "p:first", this ).text( "غادر المؤشر" );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p:first", this ).text( "دخل المؤشر" );
    $( "p:last", this ).text( ++n );
  })
  .mouseleave(function() {
    $( "p:first", this ).text( "غادر المؤشر" );
  });
</script>
 
</body>
</html>

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=jQuery/mouseleave&oldid=10005»