בחלק 27 ראינו שהקוד המטפל בקליקים של העכבר אינו נותן תוצאה רצויה במסכי מגע.
כדי להתאים את הקוד למסך מגע נחליף את החלק הקורא לפונקיות של jQuery שהן()mouseup ו-()mousedown בקוד הבא:
// Events region
document.getElementById('hidden_button').addEventListener('touchstart', function () {
snd.setVolume('1.0');
particle_count = initialParticlesNumber * 4;
for (var i = 0; i < particle_count; i++) {
particles.push(new particle());
}
}, false);
document.getElementById('hidden_button').addEventListener('touchend', function () {
snd.setVolume('0.2');
particle_count = initialParticlesNumber;
particles.splice(0, particle_count);
particles.length = particle_count;
}, false);
נפרט מעט על החלקים השונים בקוד:
- document.getElementById - בדף ה-index.html נתתי לאיזור <div> שנמצא מעל המדורה שם "hidden_button".
- addEventListener - נרים האזנה לארוע של נגיעה ב"כפתור הנסתר", הארוע נקרא "touchstart" שזה ארוע כללי של תחילת נגיעה במסך שנמצא עדיין בדיונים אם להקבע כסטנדרט על ידי ארגון W3C.
- ברגע שארוע כזה נקלט אז מתחילה לרוץ פונקציה אנונימית שקובעת את מספר החלקיקים ועוצמת הקול. לגבי עוצמת הקול הנקבעת על ידי הפונקציה setVolume() של PhoneGap - זה לא נתמך בגרסא שעד כה עסקנו בה (2.3.0) ולכן שדרגתי (למעשה הרמתי סביבת עבודה מחדש) את הגרסא ל-2.8.0.