爲什麼我不能點擊移動設備上的鏈接？

Question

我正在開發一個網站（saulesinterjerai.lt）一切正常，現在，除了在移動設備的鏈接無法點擊，而是經過其他層..

如何禁用從代碼這種行爲？ （不在瀏覽器上）

我寫的代碼在這裏，但是我從網上覆制的代碼的一些部分（如果你知道如何使用開發工具，在「dep」文件夾中的所有內容）。我還懷疑它可能是與pjax或專有的「縮放」模塊的問題，但我找不到爲什麼..：

var pjax = new Pjax({ selectors: ["head title", "body"] }) 
var Site; 

var attach_menu_control = function() { 
    var $sidebar = document.querySelector('.sidebar') 
    var $sidebar_content = $sidebar.querySelector('.content') 
    var $menu_opener = $sidebar.querySelector('.menu-closed') 

    var hide_menu = function() { 
    $sidebar_content.style.display = 'none' 
    $menu_opener.style.display = 'block' 
    $sidebar.style.width = '40px' 
    } 

    var show_menu = function() { 
    $sidebar_content.style.display = 'block' 
    $menu_opener.style.display = 'none' 
    $sidebar.style.width = '270px' 
    } 

    var click_handler = function(e){ 
    // e.preventDefault() 
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; 
    if ($sidebar_content.style.display == 'none') { 
     show_menu() 
    } else if (width <= 724) { 
     hide_menu() 
    } 
    } 

    if (!is_touch_device()) $sidebar.addEventListener('click', click_handler) 
    $sidebar.addEventListener('touchend', click_handler) 
    var event = new Event('click'); 
    $sidebar.dispatchEvent(event) 
} 
attach_menu_control() 

document.addEventListener('DOMContentLoaded', reloadCarbon) 
document.addEventListener('pjax:complete', reloadCarbon) 
document.addEventListener('pjax:send', resetCarbon) 

// Animations 

document.addEventListener('pjax:send', function(){ 
    var $main = document.querySelector('main') 
    $main.style.opacity = 0 
}) 

document.addEventListener('pjax:complete', function(){ 
    var $main = document.querySelector('main') 
    $main.style.visibility = 'hidden' 
    $main.style.opacity = 0 
    setTimeout(function(){ 
    document.querySelector('main').style.visibility = 'visible' 
    document.querySelector('main').style.opacity = 1 
    attach_menu_control() 
    }, 10) 
}) 

function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

function is_touch_device() { 
    return 'ontouchstart' in window  // works on most browsers 
     || navigator.maxTouchPoints;  // works on IE10/11 and Surface 
} 

CSS：

.menu-closed { 
     font-size: 30px; 
     position: absolute; 
     writing-mode: vertical-lr; 
     top: 50%; 
     padding-left: 14px; 
     cursor: pointer; 
    } 

    .sidebar { 
     transition: width 0.2s; 
     overflow-x: hidden; 
     z-index: 10000; 
     backface-visibility: hidden; 
    } 

    .sidebar .content { 
     width: 270px; 
    } 


    @media only screen and (max-width: 724px) { 
     .sidebar { 
      background-color: rgba(245, 245, 245, 0.87); 
     } 

     .sidebar h1 { 
      font-size: 36px; 
     } 

     .sidebar header h2 { 
      font-size: 28px; 
     } 

     .language { 
      font-size: 16px; 
     } 

     .sidebar nav > ul > li { 
      line-height: 36px; 
     } 

     .sidebar nav > ul.siteLinks a, 
     .sidebar nav > ul > li > a { 
      font-size: 36px; 
      line-height: 36px; 
     } 

     main { 
      padding-left: 40px; 
     } 

     /* Force sideback to be in closed mode when new page is opened */ 
     .sidebar { 
      width: 40px; 
     } 

     .sidebar .content { 
      display: none; 
     } 
    } 

    /* Emulate fixed positionin */ 

    html { 
     position: absolute; 
     height: 100%; 
     width: 100%; 
     overflow: hidden; 
    } 

    body { 
     height: 100%; 
     overflow: auto; 
    } 

    .fixed { 
     position: absolute; 
    } 

Answer 1

我認爲這是由於此功能，它被調用：

var click_handler = function(e){ 
    e.preventDefault() 
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; 
    if ($sidebar_content.style.display == 'none') { 
     show_menu() 
    } else if (width <= 724) { 
     hide_menu() 
    } 
    } 

e.preventDefault()防止瀏覽器執行默認操作，在這裏：切換頁面，並按照鏈接的URL。

我想你必須小心你附加這個處理程序的項目。 這種處理程序在鏈接上感覺不太自然。

有人強調這是由Chrome的控制檯的警告：

Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 
click_handler @ app.js:34 

編輯

我看到了很多附加到元素的處理程序，我不知道每個人的角色（我不例如，我不知道pjax lib），我認爲人們對預期行爲的損失負責。如果我是你，也許我會試着簡化它，並重寫菜單系統及其在網頁中的集成。

如果你不能（或不想）重構頁面，也許不要嘗試修復它，但嘗試一種解決方法。

我會做的是當菜單打開時添加一個透明的灰色背景，以顯示用戶屏幕的其餘部分被禁用（或完全透明，當用戶點擊/點擊它時，它關閉菜單回到主要內容）。 當菜單打開時，你的主要內容設置以下的css：

pointer-events: none 

這將防止菜單下的圖片/內容接收事件，只有菜單應該得到單擊/點擊事件。希望這可以幫助！