תיאור:
מקשר מטפל אירוע לאירוע "dblclick" JavaScript, או מפעיל אירוע הזה על אלמנט.
.dblclick( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.dblclick( )
הוספה בגרסה: 1.0
.dblclick( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של
.bind('dblclick', handler)
בוריאציה הראשונה, ו-
.trigger('dblclick') בשניה.
אירוע dblclick
נשלח לאלמנט, כאשר אלמנט נלחץ פעמיים.
אלמנט HTML כלשהו יכול לקבל אירוע הזה.
לדוגמא, נתבונן על HTML:
<div id="target"> Click here </div> <div id="other"> Trigger the handler </div>
Click here
Trigger the handler
מטפל אירוע יכול להיות מקושר לכל <div>:
$('#target').dblclick(function() {
alert('Handler for .click() called.');
});
עכשיו, אם ללחוץ על אלמנט הזה פעמיים, תוצג הודעה:
Handler for .dblclick() called.
אנחנו גם יכולים להפעיל אירוע, כאשר אלמנט אחר נלחץ:
$('#other').click(function() {
$('#target').dblclick();
});
אחרי הפעלת קוד הזה, לחיצות (בודדות) על Trigger the handler גם תציגו הודעה.
אירוע dblclick
מופעל רק אחרי סדר מדויק של פעולות:
- כפתור של עכבר נלחץ, כאשר מצביע נמצא בתוך האלמנט.
- כפתור של עכבר שוחרר, כאשר מצביע נמצא בתוך האלמנט.
- כפתור של עכבר נלחץ שוב, כאשר מצביע נמצא בתוך האלמנט, בתוך חלון הזמן שתלוי במערכת.
- כפתור של עכבר שוחרר, כאשר מצביע נמצא בתוך האלמנט.
רצוי לא לקשר מפעילים עבור שני אירועים
click ו- dblclick
עבור אותו אלמנט.
סדר הפעלת אירועים משתנה מדפדפן לדפדפן,
בחלק מהם אתם תקבלו שני אירועי
click,
ובחלק רק אחד.
אם ממשק, שמגיב שונה על לחיצות בודדות וכפולות, לא ניתן למנוע, אז אירוע
dblclick
יש לחקות בתוך מטפל
click.
אנחנו יכולים להשיג את זה באמצעות שמירת חותמת של הזמן, ואז להשוות זמן נוחכי עם חותמת הזמן בלחיצות הבאות.
אם ההפרש הוא קטן מספיק, אנחנו יכולים לטפל בלחיצה בודדה כמו לחיצה כפולה.
דוגמאות
דוגמה 1
כדי להציג הודעה «Hello World!» כל פעם בלחיצה כפולה ( אירוע dblclick ) על פסקה בדף, נסו:$("p").dblclick( function () { alert("Hello World!"); });
דוגמה 2
לחצו פעמיים על צבע רקע כדי להחליפו
var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
דוגמה 2 - קוד מלא:
לחצו פעמיים על צבע רקע כדי להחליפו<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
});
</script>
<style>
div { background:blue;
color:white;
height:100px;
width:150px;
}
div.dbl { background:yellow;color:black; }
</style>
</head>
<body>
<div></div><span>Double click the block</span>
</body>
</html>
האם מידע זה היה מועיל?
