禁用單擊鏈接上的觸摸設備不按預期方式工作

Question

我正在嘗試做什麼 我有下拉菜單打開懸停和父菜單有自己的着陸頁鏈接。我們不願意犧牲這種行爲，但是如果明顯爲大型觸控設備帶來問題。所以，我用jQuery檢測觸摸設備，並禁用父菜單點擊大於990px​​寬的設備。低於990像素的設備被視爲移動視圖，並切換到切換。預計切換和桌面視圖之間的切換也會在屏幕旋轉中繼續。

發生了什麼 菜單鏈接在第一次加載時被禁用並按預期工作。然後，我旋轉屏幕（從橫向到縱向），並按預期查看移動菜單，然後導航到另一個頁面。一旦頁面加載，我再次旋轉它（從肖像到風景），桌面視圖可見，但父鏈接現在是可點擊的！

我想在第二次輪換時也阻止這個點擊事件。 HTML是標準的引導3導航代碼和我的JS是這樣的：

function isTouchDevice() { 

     return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch); 
    } 

$(document).ready(function() { 

     $(window).resize(function() { 
      var o = $(window).innerWidth(); 
      function isTouchDevice() { 
       return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch); 
      } 
      if ((isTouchDevice() === true) && (o >= 990)) { 

       $('.navbar .dropdown > a ').each(function() { 
        $(this).on("click", function(){ 
         return false 
        }) 
       }) 
       alert('oi!!') 
      } 
      else { 
       $('.navbar .dropdown > a ').each(function() { 
        $(this).on("click", function(){ 
         location.href = this.href; 
        }) 
       }); 
       alert ("bad!") //for debugging purpose, not really needed 
      } 

     }).resize(); 


     //the mobile menu clicks events 
     $('#menu .dropdown > a ').click(function() { 
      location.href = this.href; 
     }); 
    }); 

PS這是一個網站，而不是一個Android應用程序。我找到了解答這類問題的答案。

更新的jsfiddle我的代碼

Answer 1

我自己解決了。原來，寬度檢查的條件造成了問題，在我的情況下，這是不必要的，因爲引導程序已經將菜單隱藏在較小的屏幕中，並且我的目標是無論如何都是支持觸摸的桌面設備。所以我從if條件中起飛了&& (o >= 990)，並且它按預期工作。

完整的js在下面（萬一任何人需要它）。我使用計時器來防止事件在調整大小之前被觸發，但它可能也會在沒有計時器的情況下工作。 ：

$(document).ready(function() { 
     var resizeTimer; 
     $(window).on('resize', function(e){ 
      clearTimeout(resizeTimer); 
      resizeTimer = setTimeout(function() { 
       function isTouchDevice() { 
        return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch); 
       } 
       if (isTouchDevice() === true) { 
        $('.navbar .dropdown > a ').click(function() { 
         return false 
        }); 
        console.log("landscape") 
       } 
       else { 
        $('.navbar .dropdown > a ').each(function() { 
         $(this).on("click", function(){ 
          location.href = this.href; 
         }) 
        }); 
        console.log("portrait") 
       } 
      }, 250) 
     }).trigger('resize'); 
    }); 

Answer 2

我覺得這是你認識到移動設備的方式有問題。爲了檢查設備尺寸，我不建議使用$(window).innerWidth()。你現在正在做的事情不會檢查屏幕大小，而是檢查窗口大小，當切換方向時會出現波動。

我想建議您不要僅檢查> 900px，而是檢查設備的整個區域（寬x高），以便風景和人像將以相同方式進行操作。我想建議使用screen.availHeight * screen.availWidth來確定這一點。

我真的希望這可以幫助你解決你的問題。請讓我知道如果沒有，我會幫你調試。