モバイルデバイスのリンクをクリックできないのはなぜですか？

Question

私は、コードからこの動作を無効にするにはどうすればよいサイト（saulesinterjerai.lt）モバイルデバイス上のリンクはクリックできません以外のすべてではなく、それは他の層に通過します、動作するようになりました。..

を開発していますか？

私が書いたコードはここにありますが、Webからコピーしたコードの一部です（開発ツールの使い方を知っていれば "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

呼び出されるこの関数は、：ページを切り替え、リンク内のURLは、次のとおりです。

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()は、ここでは、デフォルトのアクションを実行するために、ブラウザを防ぐことができます。

このハンドラを添付する項目には注意が必要ですね。 この種のハンドラは、リンク上ではあまり自然ではありません。

これは、クロームコンソールの警告によって強調されました：

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 

EDIT

私はあなたの要素にアタッチハンドラの多くを見て、私は一つ一つの役割（Iドンを理解していません例えばpjax libを知っている人はいません）、私は期待された振る舞いの喪失に責任があると思います。私があなただったら、もっと簡単にして、メニューシステムとそのWebページへの統合を書き直そうとします。

ページをリファクタリングできない（またはしたくない）場合は、修正しないでください。回避策を試してください。

メニューが開いているときに透明な灰色の背景を追加して、残りの画面が無効になっていることをユーザーに示す（または完全に透明にする、ユーザーがクリック/タップするとメニューを閉じる）メインのコンテンツに戻る）。 /タップイベントをクリックして取得する必要

pointer-events: none 

このイベントを受信するために、メニューの下の画像/コンテンツを防ぐことができます、とだけメニュー：メニューが開いているとき は、あなたがメインの内容に次のCSSを設定します。お役に立てれば！