2014-02-18 62 views
0

我有一個項目,它使我瘋狂,我有代碼做地理位置/方向,它的工作令人驚歎的everthing但ios7和我做了堆的研究,我明白它的一個問題與.click事件,我的代碼如下。jQuery的iPhone/ios7點擊事件vs觸摸

$(document).ready(function() { 
    var startingLocation; 
    var destination = "20 Papanui Rd, Christchurch Central, Christchurch 8011, New Zealand"; // replace this with any destination 
    $('.get-directions').click(function (e) { 
     e.preventDefault(); 

     // check if browser supports geolocation 
     if (navigator.geolocation) { 
      // get user's current position 
      navigator.geolocation.getCurrentPosition(function (position) { 
       // get latitude and longitude 
       var latitude = position.coords.latitude; 
       var longitude = position.coords.longitude; 
       startingLocation = latitude + "," + longitude; 

       // send starting location and destination to goToGoogleMaps function 
       goToGoogleMaps(startingLocation, destination); 
      }); 
     } 

     // fallback for browsers without geolocation 
     else { 
      // get manually entered postcode 
      startingLocation = $('.manual-location').val(); 

      // if user has entered a starting location, send starting location and destination to goToGoogleMaps function 
      if (startingLocation != '') { 
       goToGoogleMaps(startingLocation, destination); 
      } 
       // else fade in the manual postcode field 
      else { 
       $('.no-geolocation').fadeIn(); 
      } 
     } 

     // go to Google Maps function - takes a starting location and destination and sends the query to Google Maps 
     function goToGoogleMaps(startingLocation, destination) { 
      window.location = "https://maps.google.com/maps?saddr=" + startingLocation + "&daddr=" + destination; 
     } 
    }); 
}); 

HTML:

<!--#container --> 
<div id="mapcontainer"> 
    <div class="no-geolocation"> 
     <p class="warning">Your browser does not support Geolocation. Please enter your postcode and click the button again.</p> 
     <input type="text" placeholder="Enter postcode or address" class="manual-location"> 
    </div> 
    <a href="#" class="get-directions">Give me directions</a> 
</div> 
<!-- /#container --> 

現在我曾與德勤一齣戲。

<script type='text/javascript' src="files/scripts/touche.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('.get-directions').on('click', handleClicks); 
}); 
</script> 

所有我得到的是一個錯誤handleClicks is not defined和一對夫婦沒有運氣其他哈克腳本和我在我的解決問題的技術能力結束。

+0

嗨!我想'handleClicks'函數是在'touche.min.js'中定義的。 JS腳本是否正確加載? – Littm

+0

感謝您的回覆,該網站正在使用jquery-1.11.0.min.js,它可以很好地處理圖像滑塊,因此我知道它在那裏並正在工作。 – webmonkey237

+0

它可能是與另一個腳本衝突? – webmonkey237

回答

0

我不看到了如何您的文件樹,以及如何包括文件和辯論,因爲它:

嘗試檢查這項功能,做到這一點確實可以正常工作。我的意思是,做這樣的事情:

<script type='text/javascript' src="files/scripts/touche.min.js"></script> 
<script> 
handleClicks(); 
$(document).ready(function() { 
    $('.get-directions').on('click', handleClicks); 
}); 
</script> 

,放在handleClicks功能alert('something') 它將使我們肯定功能才能正常工作,也沒有衝突,文件已成功列入

更好,附上你德勤.min.js和PPLS將可以嘗試重新創建您的問題

0

圖書館Touche.js是一個圖書館,旨在使用jQuery應用您的點擊事件,並默默地將它們重新映射到支持觸摸的設備的「touchend」事件。

所以你只需要定義你的函數handleClicks並將它綁定到你的按鈕,就好像它是一個點擊事件。

圖書館應該將點擊事件重新映射到觸摸事件。