الفرق بين المراجعتين لصفحة: «jQuery/mouseout»
لا ملخص تعديل |
ط استبدال النص - 'jQeury' ب'jQuery' |
||
| (مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 26: | سطر 26: | ||
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي وسائط. | أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي وسائط. | ||
هذا التابع هو اختصار للتابع <code>[[ | هذا التابع هو اختصار للتابع <code>[[jQuery/on|.on( "mouseout", handler )]]</code> في شكله الأول والثاني، واختصار للتابع <code>[[jQuery/trigger|.trigger( "mouseout" )]]</code> في شكله الثالث. | ||
يُرسَل الحدث <code>mouseout</code> إلى عنصر عندما يخرج مؤشِّر الفأرة من حيِّزه. يمكن أن تستقبل جميع عناصر HTML هذا الحدث. | يُرسَل الحدث <code>mouseout</code> إلى عنصر عندما يخرج مؤشِّر الفأرة من حيِّزه. يمكن أن تستقبل جميع عناصر HTML هذا الحدث. | ||
| سطر 32: | سطر 32: | ||
انظر مثلًا إلى شيفرة [[HTML]] التالية:<syntaxhighlight lang="html"> | انظر مثلًا إلى شيفرة [[HTML]] التالية:<syntaxhighlight lang="html"> | ||
<div id="outer"> | <div id="outer"> | ||
عنصر خارجي | |||
<div id="inner"> | <div id="inner"> | ||
عنصر داخلي | |||
</div> | </div> | ||
</div> | </div> | ||
<div id="other"> | <div id="other"> | ||
استعدعِ معالج الحدث | |||
</div> | </div> | ||
<div id="log"></div> | <div id="log"></div> | ||
| سطر 49: | سطر 49: | ||
$( "#outer" ).mouseout(); | $( "#outer" ).mouseout(); | ||
}); | }); | ||
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على | </syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "استدعِ معالج الحدث". | ||
يمكن أن يسبِّب هذا النوع من الأحداث بعض التعقيدات والمشكلات المتعلقة بانتشار الحدث (bubbling). فعندما يخرج مؤشِّر الفأرة مثلًا من حيِّز العنصر Inner في المثال السابق، يُرسَل الحدث <code>mouseout</code> إليه ثمَّ تُعاد الكرَّة ذاتها بالنسبة للعنصر الأب له وهو outer؛ هذا يؤدي إلى استدعاء معالج الحدث <code>mouseout</code> المرتبط مع العنصر في أوقات غير مناسبة. راجع توثيق التابع <code>.mouseleave()</code> فهو البديل الأنسب في مثل هذه الحالات. | يمكن أن يسبِّب هذا النوع من الأحداث بعض التعقيدات والمشكلات المتعلقة بانتشار الحدث (bubbling). فعندما يخرج مؤشِّر الفأرة مثلًا من حيِّز العنصر Inner في المثال السابق، يُرسَل الحدث <code>mouseout</code> إليه ثمَّ تُعاد الكرَّة ذاتها بالنسبة للعنصر الأب له وهو outer؛ هذا يؤدي إلى استدعاء معالج الحدث <code>mouseout</code> المرتبط مع العنصر في أوقات غير مناسبة. راجع توثيق التابع <code>.mouseleave()</code> فهو البديل الأنسب في مثل هذه الحالات. | ||
| سطر 59: | سطر 59: | ||
إظهار عدد مرات استدعاء الحدث <code>mouseout</code> والحدث <code>mouseleave</code>. يُطلَق الحدث <code>mouseout</code> عندما يخرج مؤشِّر الفأرة من داخل العنصر الابن أيضًا، بينما يُطلَق الحدث <code>mouseleave</code> عندما يخرج المؤشِّر من حدود العنصر فقط:<syntaxhighlight lang="html"> | إظهار عدد مرات استدعاء الحدث <code>mouseout</code> والحدث <code>mouseleave</code>. يُطلَق الحدث <code>mouseout</code> عندما يخرج مؤشِّر الفأرة من داخل العنصر الابن أيضًا، بينما يُطلَق الحدث <code>mouseleave</code> عندما يخرج المؤشِّر من حدود العنصر فقط:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang=" | <html lang="ar"> | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>mouseout | <title>mouseout مثالٌ عن استعمال التابع</title> | ||
<style> | <style> | ||
div.out { | div.out { | ||
| سطر 88: | سطر 88: | ||
<div class="out overout"> | <div class="out overout"> | ||
<p> | <p>حرك مؤشر الفأرة</p> | ||
<div class="in overout"><p> | <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> | <p>حرك مؤشر الفأرة</p> | ||
<div class="in enterleave"><p> | <div class="in enterleave"><p>حرك مؤشر الفأرة</p><p>0</p></div> | ||
<p>0</p> | <p>0</p> | ||
</div> | </div> | ||
| سطر 113: | سطر 113: | ||
$( "div.enterleave" ) | $( "div.enterleave" ) | ||
.on( "mouseenter", function() { | .on( "mouseenter", function() { | ||
$( "p:first", this ).text( " | $( "p:first", this ).text( "دخل المؤشر" ); | ||
}) | }) | ||
.on( "mouseleave", function() { | .on( "mouseleave", function() { | ||
$( "p:first", this ).text( " | $( "p:first", this ).text( "خرج المؤشر" ); | ||
$( "p:last", this ).text( ++n ); | $( "p:last", this ).text( ++n ); | ||
}); | }); | ||
المراجعة الحالية بتاريخ 13:28، 1 يوليو 2018
.mouseout( handler )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين مع الحدث mouseout (الخروج من حيِّز عنصر) في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.
.mouseout( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.mouseout( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.mouseout()
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي وسائط.
هذا التابع هو اختصار للتابع .on( "mouseout", handler ) في شكله الأول والثاني، واختصار للتابع .trigger( "mouseout" ) في شكله الثالث.
يُرسَل الحدث mouseout إلى عنصر عندما يخرج مؤشِّر الفأرة من حيِّزه. يمكن أن تستقبل جميع عناصر HTML هذا الحدث.
انظر مثلًا إلى شيفرة HTML التالية:
<div id="outer">
عنصر خارجي
<div id="inner">
عنصر داخلي
</div>
</div>
<div id="other">
استعدعِ معالج الحدث
</div>
<div id="log"></div>
يمكن أن يُربط معالج الحدث مع أي عنصر:
$( "#outer" ).mouseout(function() {
$( "#log" ).append( "Handler for .mouseout() called." );
});
عندما يخرج مؤشِّر الفأرة من حيِّز العنصر <div> ذي المعرِّف outer، فستضاف الرسالة إلى العنصر <div id="log">. يمكن أيضًا استدعاء الحدث يدويًا باستعماله دون أي وسائط:
$( "#other" ).click(function() {
$( "#outer" ).mouseout();
});
بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "استدعِ معالج الحدث".
يمكن أن يسبِّب هذا النوع من الأحداث بعض التعقيدات والمشكلات المتعلقة بانتشار الحدث (bubbling). فعندما يخرج مؤشِّر الفأرة مثلًا من حيِّز العنصر Inner في المثال السابق، يُرسَل الحدث mouseout إليه ثمَّ تُعاد الكرَّة ذاتها بالنسبة للعنصر الأب له وهو outer؛ هذا يؤدي إلى استدعاء معالج الحدث mouseout المرتبط مع العنصر في أوقات غير مناسبة. راجع توثيق التابع .mouseleave() فهو البديل الأنسب في مثل هذه الحالات.
ملاحظات إضافية
لمَّا كان التابع .mouseout() اختزالٌ للتابع .on( "mouseout", handler )، فمن الممكن استعمال .off( "mouseout" ) لإزالة الحدث mouseout أي عمليَّة معاكسة لما سبق.
أمثلة
إظهار عدد مرات استدعاء الحدث mouseout والحدث mouseleave. يُطلَق الحدث mouseout عندما يخرج مؤشِّر الفأرة من داخل العنصر الابن أيضًا، بينما يُطلَق الحدث mouseleave عندما يخرج المؤشِّر من حدود العنصر فقط:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>mouseout مثالٌ عن استعمال التابع</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" )
.mouseout(function() {
$( "p:first", this ).text( "mouse out" );
$( "p:last", this ).text( ++i );
})
.mouseover(function() {
$( "p:first", this ).text( "mouse over" );
});
var n = 0;
$( "div.enterleave" )
.on( "mouseenter", function() {
$( "p:first", this ).text( "دخل المؤشر" );
})
.on( "mouseleave", function() {
$( "p:first", this ).text( "خرج المؤشر" );
$( "p:last", this ).text( ++n );
});
</script>
</body>
</html>