Thursday, November 20, 2014

jQuery Mobile กับปัญหาการคลิกเอง (Firing twice / Firing multiple times)

เขียน jQuery Mobile กับ Cordova อยู่ เจอปัญหาปุ่มถูกคลิกเอง คลิกหลายๆครั้งด้วย ทำให้กระโดดไปหน้าอื่นทั้งๆที่ยังไม่ได้คลิก

ไปค้นดูครับ คนเจอปัญหาเยอะแยะ เช่น
http://stackoverflow.com/questions/14411532/all-jquery-mobile-events-firing-twice
http://stackoverflow.com/questions/10794181/jquery-mobile-tap-event-triggered-for-twice

และมีหลายวิธีแก้เหลือเกิน เช่น
1. เปลี่ยน event สำหรับการแตะ จาก tap เป็น click คือให้ใช้
$("#btt").off().on("click",function(){
 //do something
})

2. ใช้ off ปิด event ก่อนหน้า แล้วตามด้วย on เช่น
$("#btt").off().on("tap",function(){
      //off then on
});

หรือ
$("#btt").off("tap").on("tap",function(){
      //off then on
});

3. ย้าย script ไปไว้ระหว่างแท็ก head ไม่ใช่ส่วน body

4. เพิ่ม event.preventDefault(); เช่น
$("#btt").on("tap",function(event){
    event.preventDefault();
    //other codes
});

5. วางลำดับการอ้างถึง JavaScript และแทรก script ต่อไปนี้ลงไป
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script>
 $(document).on("mobileinit", function() {
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.linkBindingEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.defaultTransition = 'none';
 });   
</script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>  
<script src="js/index.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>

และอีกมากมาย

ส่วนตัวผมเองเจอปัญหากับ tap แล้วแค่พอเปลี่ยนเป็น click ก็หาย

สาเหตุอีกอย่างนึง ที่สังเกตดูคือ ถ้าเราสร้างแอพโดยมีหลายๆ หน้า และแต่ละหน้าเชื่อมโยงกันไปมา คือสามารถกระโดดไป-กลับ ไปหน้าอื่นๆได้
การกำหนด event สำหรับปุ่มต่างๆ ควรจะเอาไว้ใน

$(document).on("pagecreate","#pageID",function(){
    //begin code here
});

ส่วนตัวแปรที่ต้องการอัพเดททุกครั้ง เช่น เพื่อการแสดงผล ให้เอาไว้ใน

$(document).on("pagebeforeshow","#pageID",function(){
    //begin code here
});

ไม่ควรเอา event สำหรับปุ่มไว้ใน page event: pagebeforeshow เพราะทุกครั้งที่กลับมาที่หน้านี้ ผมเข้าใจว่าปุ่มมันเหมือนจะถูกกำหนด event สองครั้งซ้อน เมื่อเรากดปุ่มก็เลยเหมือนกดสองครั้ง

ถ้าใครเจอปัญหานี้ ลองวิธีแก้ต่างๆข้างต้นดูครับ

No comments:

Post a Comment